例子:
前端编写popup弹窗,一般用半透明的黑色做幕布,常见代码:
.popup{
background: rgba(0,0,0,.4)
}
上面的写法兼容各大主流浏览器,包含IE9及以上,但在IE8浏览器中不显示
解决方案:
.popup{
background: rgba(0,0,0,.4);
background: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
上面的代码为自动判断浏览器渲染时,如果第一行不执行,则执行第二含的filter属性
第二行代码为渐变代码,当不需要渐变,startColorstr和endColorstr设置相同值即可
“#66000000”拆开来看,十进制的#000000即使十六进制的rgb(0,0,0), 数字66对应的0.5的透明度
下面说明从0.1到0.9每个数字对应一个IE-filter值。对应关系:
RGBA透明度(a) | IE-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 |
以上为解决IE8中backgroun rgba兼容性问题