IE8浏览器的rgba
在一次开发中,发现要根据页面的一个按钮弹出一个注册框,并拥有黑色的半透明背景,自然而然的用上了CSS3:
rgba(red, green, blue, alpha);
其中,前面三个参数为0~255的数字,表示 红(red)、绿(green)、蓝(blue)
三大基本颜色的深度, alpha为0.1~1的小数,表示 不透明度
,即0为全透明,1为不透明,这个方法能很快捷地实现背景色或者文字颜色的透明操作。
然而IE9以下的老旧浏览器不能支持CSS3,显示结果为:
黑色的半透明背景并没有显现,因此必须得求得一个方法来实现透明的设置。
网上的教程攻略说明也不少了,最多使用的方法即是IE浏览器独有的 filter
滤镜的css样式:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
该滤镜是用以解决渐变色的滤镜操作的,不过因为咱们只需要要操作的仅仅只是同一个颜色的透明度问题,因此保持 startColorstr
和 endColorstr
相同即可。
另外这里的 #7f000000
,#7f代表的是透明度,000000是以十六进制表现的颜色,这些值都是从 000000
(完全透明/黑色) 到 ffffff
(完全不透明/白色) 下面是常用透明度的对应表:
透明度 | filter |
---|---|
0.1 | 19 |
0.2 | 33 |
0.3 | 4C |
0.4 | 66 |
0.5 | 7F |
0.6 | 99 |
0.7 | B2 |
0.8 | C8 |
0.9 | E5 |
所以相对应的代码为
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
}
类名为 .mask
的背景层为透明度为0.5的黑色背景色。