解决ie低版本浏览器兼容rgba属性

在使用rgba设置元素颜色属性时，ie低版本存在兼容性问题。

html代码如下
<div class="test"><img src="img/1.png"><i>覆盖文字</i></div>

CSS代码如下

IE10，IE8,IE7均显示正常，


但在IE9下却出现问题：

问题所在：
ie9下会重复应用filter和rgba导致透明度失效
解决方法：
方法1：
取消ie9下的滤镜css：

:root .test i{filter:none;}

取消ie9下的滤镜css：

:root .test i{filter:none;}

这里用到了CSS3 :root 选择器：所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本，而滤镜filter只有ie9以及更低的ie版本才支持，ie10开始已废弃不支持filter，这样刚好可利用:root来实现针对ie9的hack!!
装了ie10或更高版本的ie，可用ietester新建ie9模式标签查看上面代码运行效果。
(注意：装了ie10或更高版本的ie，即使将文档模式调成ie9，会发现上面 的代码也显示正确，合理的解释是：ie10开始已废弃不支持filter，即使文档模式调成ie9，filter也不会生效！另外提一下 css \9 写法是针对ie所有版本的hack写法，网上说的只是针对ie6~8的hack说法是错误的！)
全兼容完整代码如下：
.test i{ background:rgba(0,0,0,.8); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000); } :root .test i{filter:none;}

输入十六进制的颜色值以及透明度，自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。在线转换工具
http://linxz.github.io/tianyizone/hex_color.html
`

输入十六进制的颜色值以及透明度，自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。在线转换工具http://linxz.github.io/tianyizone/hex_color.html

`

本文链接：https://longhonour.github.io/2019/09/25/ie-rgba/