解决老版本IE不兼容rgba的问题

更新日期: 2020-02-19阅读: 1.8k标签: ie

我们一般写一个半透明的 div ,只需要给这个 div 设置如下的属性即可:

background: rgba(255,255,255,0.5);

但是如果遇上 IE8 就有点蛋疼了。因为 IE8 不支持 rgba( ) 。 

rgba 的含义,r 代表 red ,g 代表 green ,b 代表 blue ,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a 代表透明度。

比如 rgba(255,255,255,0.5) 就是透明度为 0.5 的白色。

如果做到兼容 IE8 ,要用到 IE 的 filter 。

css代码如下:

background: rgba(255,255,255,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);

第二行的意思是当上一行的透明度不起作用的时候执行。

其本来是用来做渐变的,但是这个地方不需要渐变,所以两个参数设置成了相同的颜色。

注意:这个颜色“#7FFFFFFF”由两部分组成。

第一部是 # 号后面的 7F  , 是 rgba 透明度 0.5的 IE filter 值。

从0.1到0.9每个数字对应一个 IE filter 值。对应关系如下:

rgba 和IE下filter数值的转换
rgba 透明值IEfilter值
0.119
0.233
0.34C
0.466
0.57F
0.699
0.7B2
0.8C8
0.9E5

直接取整计算的,没有进位直接舍去 
alpha*255再转换成16进制即可

第二部分是 7F 后面的六位 。这个是六进制的颜色值,要跟 rgb 中的取值相同。比如 rgb(255,255,255) 对应 #FFFFFF ;都是白色。

现在 半透明的 div 就可以兼容IE8了。

链接: https://fly63.com/article/detial/8301

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!