CSS3.0：透明度 Opacity
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属性中有详细的讲解。此处详情可参考此文：http://reference.sitepoint.com/css/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不了解的可以查阅：http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx
综上所述，兼容所有版本浏览器的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的探讨告一段落，有兴趣的朋友可以继往开来~~
此文参考了：
http://www.zhangxinxu.com/css3/css3-opacity.php
