CSS实现PNG图片背景透明效果

使用PNG图片作背景,但ie6不能显示PNG透明效果,所以要用AlphaImageLoader滤镜来实现. 在CSS文件中要注意图片相对路径:滤镜中的图片路径是相对页面文件,而其它的则是相对CSS文件(注意加粗字). 用这滤镜后IE下链接会失效,用 position: relative;解决这个问题.

以下是代码例子:

Default.aspx代码:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html  xmlns ="http://www.w3.org/1999/xhtml" > < head  runat ="server" >      < title > 无标题页 </ title >      < link  href ="css/StyleSheet.css"  rel ="stylesheet"  type ="text/css"   /> </ head > < body >      < form  id ="form1"  runat ="server" >          < div  id ="wrap" ></ div >      </ form > </ body > </ html >

 

css/StyleSheet.css: 

#wrap {...} {     margin: auto;     padding: 8px;     text-align: center;     width: 880px;     height: 606px; } /**/ /*not for ie 6.0*/ html > body #wrap {...} {     background: url(../css/img/background.png) no-repeat left top; } /**/ /*for ie 6.0*/ * html #wrap {...} {     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src= "css/img/background.png" );     background: none; } #wrap a {...} {     color: #c00;     text-decoration: none;     position: relative; } /**/ /*解决IE下链接失效的问题*/ #wrap a:hover {...} {     text-decoration: underline; }