最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

RGBA背景颜色半透明全兼容的做法

CSS rockyxia 6907浏览

写在前面

背景颜色半透明在网页中经常会用到,在用到半透明时一般立马会想到opacity,为兼容IE可能还会用到filter,如:

filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;

上面的写法是可以达到半透明的效果,但同时也会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这并不是我想要的。

有没有什么方法能实现只有背景透明不影响其内容及子元素呢,答案当然是有的,就是今天我要介绍的RGBA,再配合兼容IE使用filter,就能实现全部浏览器兼容了。

RGBA背景颜色半透明全兼容的做法

RGBA实现方法

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

所以在ie8中设置半透明就要使用ie的filter来解决这个问题,css代码如下:

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

第二句话就是IE的filter用法,这句话的意思本来是用来做渐变的,但是这个地方不需要渐变,所以两个颜色都设置成了相同的颜色。filter一般不建议使用,这里是为了兼容ie8及以下使用,在使用的时候可以用hack方法让他只针对ie8及以下有效。

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

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

rgba和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
计算方法:appha*255再转换成16进制即可。这里直接取整计算的,没有进位直接舍去。

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

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

来扩展一下

关于上面的rgba和IE下filter值的转换对应表只提供了0.1-0.9的,一般情况下应该是够用,但是我最近一个项目里面使用大量的透明度,0.1-0.9远远不够,每次要计算还是挺麻烦的,还要转16进制,索性直接制作了一个计算工具,每次使用也就方便了很多。工具提供了16进制颜色值与rgb三色的相互转换,以及IEfilter值的转换。查看计算工具请猛击我。

rgba和IE下filter值的转换工具

转载请注明:Rockyxia Web技术博客 » RGBA背景颜色半透明全兼容的做法
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)