CSS利用filter/opacity实现浏览器兼容的背景透明

一直记得CSS利用filter/opacity能实现浏览器全兼容的背景透明，但其中filter滤镜又臭又长老是记不住，还有那16进制算法老是忘，这次要记录下来。

.rgba6{
    background:rgba(0,0,0,.6);
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#99000000,endColorStr=#99000000);
}

:root .rgba6{
    filter:'';
}

前两位99代表透明度0.6,后面6位000000是代表黑色颜色。那这个99是怎么算出来的呢，是通过透明度0.6转化为16进制而来的，如何算？打开浏览器控制台，输入下方代码：

Math.floor(0.6 * 255).toString(16)//输出"99"

深入解读：

• rgba是浏览器IE9+支持，那IE9以下通过filter滤镜来实现。
• 从IE10开始，已不支持filter滤镜。
• 会发现IE9中rgba起作用了，filter也起作用了，背景色重叠加深了背景色。
• :root选择器用来匹配文档的根元素。在HTML中根元素始终是HTML元素。关键是:root选择器浏览器支持是IE9+，所以:

:root .rgba6{
    filter:'';
}

取消filter滤镜。