透明-----css的filter，opacity与css3的background-color: rgba

 先从问题出发：

现象：

今天在项目中发现一个在IE9下的bug，现象是IE9下背景为不透明，而在IE8，IE10以及firefox，chrome下都是正常的，如下图：

   

IE9的效果，背景为纯白色，

IE8，IE10，firefox，chrome的透明效果

调查过程：

1.查看代码：

css中对li标签设置的是

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#BF494949,endColorstr=#BF494949);background-color:rgba(0, 0, 0, 0.3)

2.补习一下代码中相关知识

(只有真正了解了原代码，才能在针对原代码做自如的修改)

filter:progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorStr= ,endColorStr= )

属性：
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
　　true: 默认值。滤镜激活。
　　false:滤镜被禁止。

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

• 格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。

•  取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
  

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

目前IE6-IE9都支持，包括IE9

background-color:rgba(0, 0, 0, 0.3)

这是css3的一个样式，

语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

目前IE9以及IE9以上，firefox，chrome都支持。

可以参照给文章http://www.w3cplus.com/content/css3-rgba，比较详细。

3.问题找到了

由上面两个知识中发现，IE9是同时支持的，这就是说为什么IE8和IE10都正常，然后打开F12查看

而IE8和IE10分别支持其中一个。

接着在F12中将filter的样式去掉，发现效果是OK的；将filter勾选，然后将background-color去掉，发现透明效果不是很好，可见IE9对其支持度还不够。

接下来就是如何修改了。

• 在html中常用的是条件注释，如：

<!--[if IE 9.0]>

• 在js中又采用版本判断

if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"") == "MSIE9.0") 

• 但现在是在css文件中去判断，思前想后用hack判断吧，因为IE9支持@media all所以采用以下的方式

@media all and (min-width:0) {

li{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#BF494949,endColorstr}

将enabled改为false即可，这样在IE9就可以，而IE9以上及firefox，chrome因为不识别filter:progid，所以不做处理，从而达到兼容性。

4.额外透明的方法

• opacity：取值范围是0-1,1代表不透明，如opacity(1);

问题：会造成不单该元素自身背景透明了,它的子元素会继承opacity属性，也会透明.

• png-8的透明图片

问题：采用透明图片可以实现，但IE6下会有问题，同时图片相对js代码以及css来说，所需要的网络请求大，会影响页面的速度

5.调查该问题参考的文章：

http://www.w3cplus.com/content/css3-rgba

http://www.cnblogs.com/mizzle/archive/2012/04/05/2432752.html

http://www.footya.com/?action=show&id=114

http://angeldhp.iteye.com/blog/146612