IE 6.0 Firefox Opera 下使背景PNG图片透明

PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
HTML:
 
以下为引用的内容：

代码

< div  id ="wrap" >
< p >< strong > PNG半透明背景图片效果 </ strong >< br  /> ：PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出需要使用绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。 </ p >  
< p > IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</ p >
< p >< a  class ="test"  href ="#" > 这里是个超链接测试 </ a ></ p >
</ div >  

 

 

CSS:

 

以下为引用的内容：

代码

#wrap {  width : 460px ; margin : 20px auto 20px 80px ; text-align : left ; height : 300px ;  padding : 20px ;  border : 1px #eee solid ; }
/* not for ie 6.0 */
html>body #wrap { background :  url(img/bgcanvas.png) repeat ; }
/* for ie 6.0 */
* html #wrap  {
filter :  progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png") ;
background : none ;
}
#wrap a { color : #c00 ;  text-decoration :  none ;  position : relative ; } /* 解决IE下链接失效的问题，在此加上position:relative */
#wrap a:hover {  text-decoration : underline ;  
}  

 

经测试，兼容IE6.0 Firefox 1.5 Opera 8.5，因为AlphaImageLoader滤镜不支持IE5.0，所以IE5.0没有达到想要的效果，基本IE5.0与PNG无缘了。

 

演示：

以下为引用的内容：

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 透明背景模型 </ title >
< style  type ="text/css"  media ="all" >
body {  font : 12px/120% Arial, Helvetica, sans-serif ;  color : #333 ; background : #fff url(/img/site/bg.jpg) no-repeat fixed }
a {  color : #333333 ; }
code {  display : block ;  font-family : "Courier New", Courier, monospace ;  color : #006600 ;  padding : 10px ;  border : 1px #333 dashed ;  background : #fff ;  font-size : 11px ; }  
#wrap {  width : 460px ; margin : 20px auto 20px 80px ; text-align : left ; min-height : 300px ;  padding : 20px ;  border : 1px #eee solid ; }  
/* not for ie 6.0 */
html>body #wrap { background :  url(/img/bgcanvas.png) repeat ; }
/* for ie 6.0 */
* html #wrap  {
        filter :  progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/img/bgcanvas.png") ;
        background : none ;
}
#wrap a { color : #c00 ;  text-decoration :  none ;  position : relative ; }
#wrap a:hover {  text-decoration : underline ; }
#footer {  width : 460px ;  margin : 2px auto 2px 80px ;  text-align : center ; }
</ style >  

</ head >  

< body >
< div  id ="wrap" >
         < p >< <strong > PNG半透明背景图片效果 </ strong >< br  />
  PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。 </ p >
         < p > IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</ p >
         < p >< a  class ="test"  href ="#" > 这里是个超链接测试 </ a ></ p >
</ div >
</ body >
</ html >  

 

 

另外你可以用js来实现把png的图片透明,请参考:

 

IE浏览器中让PNG图片透明