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

2019-03-25363次阅读css

一直记得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滤镜。

上一篇: CSS实现多边框技巧  下一篇: CSS中的背景属性background  

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