让IE支持RGBa的背景色
浏览:1717次 出处信息
文章部分内容来自: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。
下面附上示例中用到的图片:
建议继续学习:
- 小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现 (阅读:2402)
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果 (阅读:1729)
- 使用CSS和DataURI来添加杂色滤镜效果 (阅读:1145)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:消失的列表背景
后一篇:底部浮动条的一种兼容方案 >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: RGBa 滤镜 背景色
- 发布时间:2010-08-15 22:45:11
近3天十大热文
- [45] 界面设计速成
- [42] Oracle MTS模式下 进程地址与会话信
- [41] 图书馆的世界纪录
- [41] 如何拿下简短的域名
- [41] android 开发入门
- [40] IOS安全–浅谈关于IOS加固的几种方法
- [39] 视觉调整-设计师 vs. 逻辑
- [37] 程序员技术练级攻略
- [37] 【社会化设计】自我(self)部分――欢迎区
- [36] 读书笔记-壹百度:百度十年千倍的29条法则