W3C标准属性是opacity,现代浏览器都支持，但IE6/7/8却不支持该属性。
在Firefox，Safari，Opera，Chrome中测试都支持opacity。如设置div的透明度为40%。
01 |
<!DOCTYPE HTML> |
02 |
<html> |
03 |
<head> |
04 |
<title>set div opacity</title> |
05 |
<style> |
06 |
.wrapper { |
07 |
border:solid 1px gray; |
08 |
opacity:0.4; |
09 |
} |
10 |
</style> |
11 |
</head> |
12 |
<body> |
13 |
<div class="wrapper"> |
14 |
set div opacity |
15 |
</div> |
16 |
</body> |
17 |
</html> |
注意：firefox3.5以下版本使用-moz-opacity属性。
IE6/7/8中复杂些
1、IE4-IE7使用filter: alpha(opacity=xx)，但要同时使该元素拥有hasLayout
01 |
<!DOCTYPE HTML"> |
02 |
<html> |
03 |
<head> |
04 |
<title>set div opacity</title> |
05 |
<style> |
06 |
.wrapper { |
07 |
border:solid 1px gray; |
08 |
background-color:green; |
09 |
filter: alpha(opacity=40); |
10 |
zoom:1; |
11 |
} |
12 |
</style> |
13 |
</head> |
14 |
|
15 |
<body> |
16 |
<div class="wrapper"> |
17 |
set div opacity |
18 |
</div> |
19 |
</body> |
20 |
</html> |
2、IE8下也可以用上面的filter: alpha(opacity=10)，且不用设置zoom使元素拥有layout。同时IE8可以使用-ms-filter属性。如
-ms-filter: "alpha(opacity=10)"; /* IE 8 */