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> php程序员站 <p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型 </p> <p><a class="test" href="#">这里是个超链接测试</a></p> </div> |
CSS: phperz.com
以下为引用的内容: #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; www.phperz.com } |
经测试,兼容IE6.0 Firefox 1.5 Opera 8.5,因为AlphaImageLoader滤镜不支持IE5.0,所以IE5.0没有达到想要的效果,基本IE5.0与PNG无缘了。 phperz.com
演示:
php程序员之家
以下为引用的内容: <!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;} phperz.com /*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> php程序员站
</head> www.phperz.com
<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> phperz.com
|
另外你可以用js来实现把png的图片透明,请参考: php程序员站
IE浏览器中让PNG图片透明 www.phperz.com
|