设置HTML元素的透明度

时间：2011-03-09 来源：snandy

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 */

相关：

https://developer.mozilla.org/En/CSS:-moz-opacity

使用滤镜设置透明导致 IE 6/7/8/9 解析异常