CSS opacity 这些年已经成为一种技术的趋势，让opacity在跨浏览器中兼容，也困扰着开发人员。今天这篇文章关于CSS opacity 的详细讲解，并提供了代码示例和解释来帮助大家更好在跨浏览器中应用opacity。
Opacity的基本语法
语法：<length> | inherit
取值：<length> ：由浮点数字和单位标识符组成的长度值。不可为负值。默认值为：1
inherit：默认继承。
说明：由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度，opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。
兼容性：
| (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
| (×)IE7 | (√)Firefox 3.5 | |||
| (×)IE8 |
例子：
.opacity1{opacity:0.3;}
<img class=”opacity” src=”…” />
Opacity的详细解说
早前的opacity 设定
#myElement{ -khtml-opacity: .5; -moz-opacity: .5}
-khtml-opacity的设定是为了以webkit为内核的浏览器，在旧版本的safari中同样起作用。
-moz-opacity致于mozilla的早期版本。自从Firefox 0.9 版本后，Firefox已经不再用-moz-opacity 。Firefox 3.5 现在已经用 Gecko的内核，已经不支持这个属性了。
CSS Opacity in Firefox, Safari, Chrome, and Opera
#myElement{ opacity: .7;}
CSS Opacity in Intelnet Explore
#myElement{filter: alpha(opacity=40);}
这段代码在IE 6-8中都是通用的。但对IE6-7有个告诫：为了让应用有效，这个元素需要 “have layout”。一个元素能够通过一列写的CSS属性获得layout，其中包括 width,positon. 具体的在微软的hasLayout属性中有详细的讲解。此处详情可参考此文： 。
当然对于IE8还有别的方法
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); 针对IE6-8 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; 这对IE8}
升级版的写法：
#myElement { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; filter: alpha(opacity=40);}}
基本上来说，如果页面中含有 IE8-as-IE7 meta tag, 或者你担心IE8的用户点击compatibility mode button ， -ms-filter 这个就是必须的了。其他的，filter属性就可以搞定了~
关于IE8-as-IE7 meta tag这个简单讲解一下：
让IE8的页面IE7一样~增加一个meta代码
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
对 Compatibility mode button不了解的可以查阅：
综上所述，兼容所有版本浏览器的Opacity设定为：
#myElement { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }
对于CSS opacity的研究，让我们走的更深一些吧!
通过JS改变Opacity
document.getElementByIdx_x_x(“myElement”).style.opacity=”.4”;// 对大多数浏览器document.getElementByIdx_x_x(“myElement”).style.filter=”alpha(opacity=40)”;//对IE浏览器
通过jQuery改变Opacity
$(“#myElement”).css({opacity: .4});
到此，对CSS opacity的探讨告一段落，有兴趣的朋友可以继往开来~~
此文参考了：