如何设置HTML元素的透明度_SEO优化_网站建设_BEES企业网站管理系统

当前位置:首页 > 网站教程 > 内容列表

如何设置HTML元素的透明度

点击次数:更新时间:2011-11-11 09:11:16【打印】【关闭】

W3C标准属性是opacity,现代浏览器都支持，但IE6/7/8却不支持该属性。

在Firefox，Safari，Opera，Chrome中测试都支持opacity。如设置div的透明度为40%。

				
								01
							
								<!DOCTYPE HTML> 
						
								02
							
								<html> 
						
								03
							
								  <head> 
						
								04
							
								    <title>set div opacity</title>  
						
								05
							
								    <style> 
						
								06
							
								        .wrapper { 
						
								07
							
								            border:solid 1px gray; 
						
								08
							
								            opacity:0.4; 
						
								09
							
								        } 
						
								10
							
								    </style> 
						
								11
							
								  </head> 
						
								12
							
								  <body> 
						
								13
							
								    <div class="wrapper"> 
						
								14
							
								        set div opacity 
						
								15
							
								    </div>                 
						
								16
							
								  </body> 
						
								17
							
								</html>

注意：firefox3.5以下版本使用-moz-opacity属性。

IE6/7/8中复杂些

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

				
								01
							
								<!DOCTYPE HTML"> 
						
								02
							
								<html> 
						
								03
							
								  <head> 
						
								04
							
								    <title>set div opacity</title> 
						
								05
							
								    <style> 
						
								06
							
								        .wrapper { 
						
								07
							
								            border:solid 1px gray; 
						
								08
							
								            background-color:green; 
						
								09
							
								            filter: alpha(opacity=40); 
						
								10
							
								            zoom:1; 
						
								11
							
								        } 
						
								12
							
								    </style> 
						
								13
							
								  </head> 
						
								14
							
								15
							
								  <body> 
						
								16
							
								    <div class="wrapper"> 
						
								17
							
								        set div opacity 
						
								18
							
								    </div>                 
						
								19
							
								  </body> 
						
								20
							
								</html>