您的位置：首页 > Web前端 > HTML

设置html元素的透明度

2010-11-18 08:58 89 查看

w3c标准属性是opacity,firefox支持，但IE却不支持该属性。

在FF3.5++，safari4，opera10，chrome4中测试都支持opacity。如设置div的透明度为40%：

<!DOCTYPE HTML">
<html>
<head>
<title>set div opacity</title>

<mce:style><!--
.wrapper {
border:solid 1px gray;
opacity:0.4;
}

--></mce:style><style mce_bogus="1">		.wrapper {
border:solid 1px gray;
opacity:0.4;
}
</style>
</head>

<body>

<div class="wrapper">
set div opacity
</div>

</body>
</html>

注意：firefox3.5以下版本使用

-moz-opacity属性。

IE下复杂些：
1、IE4-IE7使用filter: alpha(opacity=xx)，但要同时使该元素拥有hasLayout

<!DOCTYPE HTML">
<html>
<head>
<title>set div opacity</title>

<mce:style><!--
.wrapper {
border:solid 1px gray;
background-color:green;
filter: alpha(opacity=10);
zoom:1;/* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}

--></mce:style><style mce_bogus="1">		.wrapper {
border:solid 1px gray;
background-color:green;
filter: alpha(opacity=10);
zoom:1;/* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}
</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

PS : IE9 beta已经支持opacity属性(2010-7-14)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航