http://www.jluvip.com/blog/article.asp?id=243 PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。 IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型 (X)HTML: PHP: <div id="wrap"> <p><a href="http://www.jluvip.com"><strong>PNG半透明背景图片效果</strong></a><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="http://www.jluvip.com">这里是个超链接测试</a></p> </div> CSS: PHP: #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下链接失效的问题*/ #wrap a:hover{ text-decoration:underline;} 效果预览 经测试，兼容IE6.0 Firefox 1.5 Opera 8.5，因为AlphaImageLoader滤镜不支持IE5.0，所以IE5.0没有达到想要的效果，基本IE5.0与PNG无缘了。