HTML设置页面透明度<转载>

最新推荐文章于 2024-07-16 21:43:55 发布

转身泪

最新推荐文章于 2024-07-16 21:43:55 发布

阅读量1.2k

点赞数

文章标签： opacity div

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>