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

http://www.impressivewebs.com/css-opacity-reference/

http://reference.sitepoint.com/css/haslayout