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

写在前面

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

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

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

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

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值。对应关系如下：

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

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

来扩展一下

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

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