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

background: rgba(255,255,255,.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代码如下:

<span style="white-space:pre">	</span>background: rgba(255,255,255,.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了。

兼容ie8 rgba()用法的更多相关文章

  1. 兼容ie8 rgba()用法 滤镜filter的用法

    原文  http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...

  2. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  3. backgroud背景色样式兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1);但是要兼容到i ...

  4. 兼容ie8 rgba()写法

    background: rgba(255,255,255,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1 ...

  5. background:rgba() 兼容ie8 用法

    background: rgba(255,255,255,.1);//火狐,谷歌等 filter:progid:DXImageTransform.Microsoft.gradient(startCol ...

  6. 一个小方法解决RGBA不兼容IE8

    原网页http://blog.csdn.net/leihope_/article/details/70158902 要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如 ...

  7. Css实现透明效果,兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  8. 兼容ie8总结

    最近做了个兼容ie8的项目,把遇到的一些坑总结一下,欢迎大神指正,共勉. 一. js相关 1.  关于库的引用 jquery只能引用1.x的版本,swiper只能引用2.x的版本. 2. 动态生成的d ...

  9. 换工作之后需要兼容ie8的我

    以下是我ie8踩得坑,总结了一下,以免以后会遇到,虽然有的度娘也能搜到但是偶尔看看自己的文章也能学到很多(后续如有添加继续补上) 1,ie8 input框建议不要使用line-height去撑高度,在 ...

随机推荐

  1. 在js中怎么样选择互斥的相邻元素

    在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下: <style> *{ ...

  2. 关于Java static 的学习心得

    static,大家都很熟悉.但是要说真的懂,那就很少了.(当然我也不是很懂,但不妨碍学习吗.) 首先,我认为static修饰的成员就是属于类本身的成员.如果你加了一个static修饰符,好吧,那就相当 ...

  3. arcgis制作风或水流速流向图

    制作风或水流速流向图 风速风向图或流速流向图相信大家都已经见过不少,但不知道有多少人会制作这样炫的专题图,下面这边文章向我们展示了当基本数据U和V矢量被存储时,怎样计算风或水流的速度和方向和对其进行符 ...

  4. Set,List,Map,Vector,ArrayList的区别(转)

    JAVA的容器---List,Map,Set Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtab ...

  5. FAST特征点检测features2D

    #include <opencv2/core/core.hpp> #include <opencv2/features2d/features2d.hpp> #include & ...

  6. 多行SQL语句拼成一条数据

    将多条数据组合到一行 ) set @sql='select ''roleinfo:''' ) declare cursor1 cursor for select id from Userrole wh ...

  7. 错误提示sudo: no tty present and no askpass program specified Sorry, try again.

    php调用shell脚本的svnup.php文件内容: <?set_time_limit(0);//$output = array();$ret = 0;exec("/usr/bin/ ...

  8. 查询阻塞的sql

    WITH ProcessCTE(blocked) AS ( SELECT blocked FROM sys.sysprocesses WHERE blocked>0 union SELECT s ...

  9. .Net字符串替换

    在.Net中,有些地方需要进行字符的替换才能实现一些相关功能,这里是一个简单的字符串替换的方法 //如下,变量strWhere中是通过一些方法获取的sql拼接的条件语句,但在数据库中是多表查询,有同名 ...

  10. 【SVN】Error running context: 由于目标计算机积极拒绝,无法连接

    SVN服务没开启,步骤如下: 1.打开[控制面板]→[管理工具]→[服务]: 2.找到[visual SVN Sever],右击选择[启动]: 3.服务开启后,导入数据就成功了!