我们在设计页面的时候需要使用处理一些元素颜色的透明度来达到更好的效果，如幻灯焦点图的文本描述底色多为半透明的黑色，这样比直接使用纯黑底色美观。为了实现这个效果，一般我们会在css中直接使用rgba颜色。

如：background-color{background:rgba(0,0,0,.5);}  来表示半透明的黑色。

RGBA颜色简述

所谓rgba颜色，就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色；我们平时使用较多的为16进制颜色，如白色#000000；使用rgb颜色表示白色就是rgb（0,0,0）;实质上是一样的，只不过一个是16进制，一个是二进制；

rgba则加入一个透明度Alpha，也就是rgba中的a值，取值为0-1之间的小数来实现颜色的不透明度，这个css3属性的出现让前端颜色半透明效果实现更加简单了，但是令人蛋疼的是IE8及以下版本并不支持RGBA，虽说现在低版本的市场占有率已经很低了，但是在实际项目中还是需要兼顾一下IE8甚至是ie7的用户的。

例如 background-color{background:rgba(0,0,0,.5);} 这个半透明黑色在IE8以及下浏览器中就等同于无。

有人会说直接使用IE的半透明滤镜来实现filter:alpha(opacity=50);不然因为此滤镜会让整个元素都呈现半透明的状态，例如幻灯片文本背景半透明，而文字本事也会半透明，非常的“不清真”啊！

兼容IE的颜色半透明解决办法

既然IE半透明滤镜不行，咱们只有想别的办法，那就是使用IE渐变滤镜FILTER:progid:DXImageTransform.Microsoft.Gradient

语法：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=iWidth,endColorStr=iWidth)

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。

其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。

EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

看了上面的专业介绍，肯定很多新手会懵逼，我通俗的讲，它是IE的渐变滤镜，startColorStr为渐变开始颜色，endColorStr为渐变结束颜色，而后面的值就是我们需要填写的，如果俩颜色不一样，就会出渐变色，如果两处值一样，就会不会渐变，这个值的颜色可以实现半透明，而且IE是支持的。看到这，就很明了的，我们使用渐变滤镜，但是不让颜色渐变，两处值写一样的，仅仅是为了使用其中不透明度。

其中值的填写需要注意：#AARRGGBB跟RGBA是不是有点联系？是的，这两个都是要填写颜色的，但是区别是RGBA是二进制颜色+十进制小数；而#AARRGGBB是16进制不透明度+16进制颜色，如我们想实现半透明黑色，RGBA值为rgba(0,0,0,.5)；#AARRGGBB值则是#7F000000；前面的7f是0.5的16进制，后面的000000则是黑色的十六进制值，下表列出rgba 透明度和IEfilter值的对应。

至此，一个兼容低版本IE的半透明黑色背景css样式出来了

div{
 background:rgba(0,0,0,.5);
 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
}

当然，举一反三，半透明红色背景css则是

div{
 background:rgba(255,0,0,.5);
 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFF0000,endcolorstr=#7FFF0000);
}

不透明度也可以根据上面表中的值进行修改。

IE9中bug的解决

上面我们讲到RGBA在IE9及以上的浏览器中是支持的，而filter渐变滤镜（IE6-IE9支持）也是工作的，就出现了IE9中RGBA和渐变滤镜颜色叠加的情况，如果上述半透明黑色背景在IE9中会出现颜色变深的情况

此时，我们需要将渐变滤镜关闭，使用:root选择器，在加一句样式即可

:root div { filter: none; }

:root 选择器匹配文档根元素，在 HTML 中，根元素始终是 html 元素。因为是css3属性，:root 选择器只会在IE9及以上版本的浏览器中工作，所以一个完美的半透明黑色背景css是下面这样的。

div{
 background:rgba(0,0,0,.5);
 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
}
:root div { 
 filter: none; 
}

RGBA在IE9以下失效，filter渐变滤镜接替工作，而在ie9以上RGBA开始工作同时关闭filter，完美！！