技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 让IE支持RGBa的背景色

让IE支持RGBa的背景色

浏览:1709次  出处信息

文章部分内容来自:RGBa Browser Support

老版本的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。

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

建议继续学习:

  1. 小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现    (阅读:2390)
  2. 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果    (阅读:1720)
  3. 使用CSS和DataURI来添加杂色滤镜效果    (阅读:1123)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1