设置html元素的透明度

最新推荐文章于 2022-06-27 14:25:25 发布

魔豆爸

最新推荐文章于 2022-06-27 14:25:25 发布

阅读量1.6k

点赞数

文章标签： html border div ie firefox filter

本文链接：https://blog.csdn.net/zhouruitao/article/details/6017306

版权

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

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

<!DOCTYPE HTML"> <html> <head> <title>set div opacity</title> <mce:style></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></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)

魔豆爸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫