透明遮罩在IE浏览器的兼容性—RGBA

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wlangmood/article/details/79134303

1、rgba基本能解决透明背景带来的遮罩效果：rgba(0, 0, 0, 0.5)，效果如图：

2、但是rgba在IE8及以下是不兼容的，可以使用IE滤镜处理：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);

前两位是十六进制的不透明度，后边六位是色值。常见透明度和十六进制关系，详情 戳这里

加上IE滤镜处理后IE8及以下浏览器都有了遮罩透明效果；但是IE9的颜色被加深了：

因为IE9同时识别rgba和filter，是的效果重叠了，所以需要给遮罩层（clsaa为hide）添加：

:root .hide{filter:none;}

:root支持IE9及以上浏览器，与后边的类名有 空格。

到此为止透明遮罩已经兼容所有浏览器！！！

那有没有更好的方法，一气呵成解决透明遮罩的效果呢？

3、截取1像素的透明效果图片（.png），给hide添加背景图：

background的兼容性还是无敌的，无敌是多么寂寞！！！