让IE支持RGBa的背景色 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 让IE支持RGBa的背景色

让IE支持RGBa的背景色

浏览:2302次出处信息

老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。上代码：

01
<!DOCTYPE html> 

02
<html> 

03
  <head> 

04
    <title>Demo</title> 

05
    <style type="text/css"> 

06
      #div1 { 

07
        padding: 10px; 

08
        width: 380px; 

09
        height: 205px; 

10
        background: url(shuizhu.jpg); 

11
      } 

12
      #div2 { 

13
        color: #FFF; 

14
        font-size: 40px; 

15
        font-weight: bold; 

16
        text-align: center; 

17
  
18
        height: 205px; 

19
        line-height: 205px; 

20
        background: rgba(125, 0, 0, .3); 

21
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000 

22
            ,endColorstr=#4B7D0000); 

23
      } 

24
    </style> 

25
  </head> 

26
  <body> 

27
    <div id="div1"> 

28
      <div id="div2"> 

29
        Hello world! 

30
      </div> 

31
    </div> 

32
  </body> 

33
</html>

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。

下面附上示例中用到的图片：

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：消失的列表背景

后一篇：底部浮动条的一种兼容方案 >>

文章信息

作者：小寒来源：记事本
标签： RGBa 滤镜背景色
发布时间：2010-08-15 22:45:11

建议继续学习

近3天十大热文