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> |
| 以下为引用的内容： #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; } |
演示：
| 以下为引用的内容： <!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;} </head> <body> |