各浏览器设置HTML 652. 元素的透明度
W3C标准属性中有个opacity,目前大多数浏览器都还是支持的,但IE6/7/8却不支持该属性。在Firefox,Safari,Opera,Chrome中测试都支持opacity。如设置div的透明度为40%,请你看下面的代码。
<!DOCTYPE HTML> <html> <head> <title>set div opacity</title> <style> .wrapper { border:solid 1px gray; opacity:0.4; } </style> </head> <body> <div class="wrapper"> set div opacity </div> </body> </html>
注意:firefox3.5以下版本使用-moz-opacity属性。
IE6/7/8中复杂些
1、IE4-IE7使用filter: alpha(opacity=xx),但要同时使该元素拥有hasLayout
<!DOCTYPE HTML"> <html> <head> <title>set div opacity</title> <style> .wrapper { border:solid 1px gray; background-color:green; filter: alpha(opacity=40); zoom:1; } </style> </head> <body> <div class="wrapper"> set div opacity </div> </body> </html>
2、IE8下也可以用上面的filter: alpha(opacity=10),且不用设置zoom使元素拥有layout。同时IE8可以使用-ms-filter属性。如
-ms-filter: "alpha(opacity=10)"; /* IE 8 */