论坛首页 Web前端技术论坛

设置html元素的透明度

浏览 6591 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-09-16   最后修改:2010-07-15
CSS

w3c标准属性是opacity,firefox3.5支持,但IE却不支持该属性(即使是最新的IE8)。

 

在FF3.5++,safari4,opera10,chrome4中测试都支持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属性。

 

IE下复杂些:

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=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 pre3已经支持opacity属性(2010-7-14)

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics