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 >
< 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 ;
}
/* 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 >
< 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图片透明