前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决老版本IE不兼容rgba的问题

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

作者头像
德顺
发布2019-11-13 17:15:36
1.7K0
发布2019-11-13 17:15:36
举报
文章被收录于专栏:前端资源前端资源

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

代码语言:javascript
复制
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代码如下:

代码语言:javascript
复制
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 透明值

IEfilter值

0.1

19

0.2

33

0.3

4C

0.4

66

0.5

7F

0.6

99

0.7

B2

0.8

C8

0.9

E5

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

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-07-05),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档