爱华网题外话：春节过去了，新年新气象，看看书学学习，写写东西，早日进入正常的工作状态。今年太多的期望需要付诸努力去实现。加油！
转入正题啦~~~~~
CSS opacity这些年已经成为一种技术的趋势，让opacity在跨浏览器中兼容，也困扰着开发人员。今天这篇文章关于CSSopacity 的详细讲解，并提供了代码示例和解释来帮助大家更好在跨浏览器中应用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有个告诫：为了让应用有效，这个元素需要 “havelayout”。一个元素能够通过一列写的CSS属性获得layout，其中包括 width,positon.具体的在微软的hasLayout属性中有详细的讲解。此处详情可参考此文：http://reference.sitepoint.com/css/haslayout。
当然对于IE8还有别的方法
#myElement {
filter:progid:DXImageTransform.Microsoft.Alpha(opac ity=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的用户点击compatibilitymode button ， -ms-filter 这个就是必须的了。其他的，filter属性就可以搞定了~
关于IE8-as-IE7 meta tag这个简单讲解一下：
让IE8的页面IE7一样~增加一个meta代码
<metahttp-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
http://www.impressivewebs.com/css-opacity-reference/
http://reference.sitepoint.com/css/haslayout
