博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个小方法解决RGBA不兼容IE8
阅读量:6859 次
发布时间:2019-06-26

本文共 889 字,大约阅读时间需要 2 分钟。

原网页http://blog.csdn.net/leihope_/article/details/70158902

要在一个页面中设置一个半透明的白色div。这个貌似不是难题,只需要给这个div设置如下的属性即可:

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

但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。

rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持的rgba的,ie8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。

所以在ie8中设置半透明就要费点脑子了。从大神那里得知可以使用ie的filter来解决这个问题,css代码如下:

background: rgba(255,255,255,0.1);        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

大家注意,这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:

 

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

到这里,rgba的用法就可以兼容IE8了。

转载于:https://www.cnblogs.com/xk1994/p/8022683.html

你可能感兴趣的文章
《深入理解mybatis原理》 Mybatis数据源与连接池
查看>>
Spring小知识
查看>>
Oracle 12c连接时报错ORA-28040问题解决方法
查看>>
入门设计模式之状态模式
查看>>
Python机器学习(二):线性回归算法
查看>>
SQL Server中有关约束(constraint)的一些细节
查看>>
MapReduce高级特性
查看>>
CentOS6.9编译安装nginx1.4.7
查看>>
使用 CodeMirror 打造属于自己的在线代码编辑器
查看>>
表单元素01
查看>>
React Native项目Xcode打包发布iOS问题
查看>>
JPress v1.0-rc2 发布,新增微信小程序 SDK
查看>>
Confluence 6 为搜索引擎隐藏外部链接
查看>>
Python Mysql 数据库操作
查看>>
iOS Autolayout 介绍 2 Interface Builder 技巧
查看>>
打卡加虐狗
查看>>
Springboot + swagger2 通过实体对象封装形式上传视频或者图片问题解决
查看>>
Confluence 5 中如何快速创建一个 JIRA Ticket
查看>>
TP5搭建虚拟主机详细步骤
查看>>
高通骁龙 675 发布:首发第四代 Kryo CPU,2019 年 Q1 商用
查看>>