使IE6中的PNG图片背景透明
August 28th, 2008 by 张磊
前台上的问题，今天遇到了。本来底色透明的PNG图片，到了IE6里面就出不来效果。这个时候修改图片文件是根本没用的，因为是IE6的问题。 浏览了一下网上给的几个解决办法，依靠js的基本没尝试成功。还有办法需要加一个HTC文件的，由于没有服务器的权限，也作罢了。后来找了一个使用CSS filter的办法，试了几下，最后弄成功了。问题虽小，却花了个把钟头折腾，所以把心得总结一下。 首先把要显示的图片放在一个HTML标签里，比如： <div id=”logo”><img src=”xxx.png” /></div> 然后在相应的CSS中写这一句： #logo{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’xxx.png’);} 保存以后刷新一下，其实效果还没出来。因为页面上显示了两张图片，一张是来自HTML的，一张是来自CSS的。来自HTML的，当然还是有底色的。所以需要对HTML做一些修改，判断一下，如果是IE浏览器，就不装载<img>标签，使用CSS中的图片。如果不是IE浏览器，那一行CSS就不会生效，页面里会加载IMG标签。就是这样： <div id=”logo”><![if !IE]><img src=”xxx.png” /><![endif]></div> 再次刷新，png文件就变成透明了。这个方法还有个问题就是，对于IE7，其实已经可以使PNG透明了。暂且忽略掉这个问题吧。
