解决IE6下PNG图片不透明的问题
IE6真是个烂浏览器，CSS方面已经一堆bug了，连这么优秀的png图片也不兼容，无法透明，透明部分会显示成灰色，倒。
有人会选择换成gif格式，但gif格式虽然可以做到透明，但会有毛边，很不美观，不爽。
在网上找到了几个方法，觉得这个方法最简单，才子修改了一下函数，直接针对IE6有效，其它浏览器不会执行此函数。也就不需要用到IE独有的条件注释来判断了。
看原代码：
<font face="新宋体">function enablePngImages() {<br /> var imgArr = document.getElementsByTagName("IMG");<br /> for(i=0; i<imgArr.length; i++){<br /> if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";<br /> imgArr[i].src = "images/none.gif";<br /> }<br /><br /> if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){<br /> var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";<br /> imgArr[i].style.backgroundImage = "url(images/none.gif)";<br /> }<br /> }<br />}</font>原理就是通过 javascript 和 css 滤镜来解决。images/none.gif是一张空白一个像素的图片。
调用时要采用IE独有的条件注释来判断，如下：
<font face="新宋体"><!--[if lt IE 7]><br /><script type='text/javascript'><br />enablePngImages();<br /></script><br /><![endif]--></font>才子觉得这样调用不太方便，改了一下函数，添加了判断IE浏览器版本的代码，调用更方便。看代码：
<font face="新宋体">function enablePngImages() {<br /> var imgArr = document.getElementsByTagName("IMG");<br /> var version = parseFloat(navigator.appVersion.split("MSIE")[1]);<br /><br /> if (version = 6.0 && (document.body.filters)) {<br /> for(var i=0, j=imgArr.length; i<j; i++){<br /> if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";<br /> imgArr[i].src = "images/none.gif";<br /> }<br /><br /> if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){<br /> var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);<br /> imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";<br /> imgArr[i].style.backgroundImage = "url(images/none.gif)";<br /> }<br /> }<br /> }<br />}</font>加了判断IE版本的代码，如果为IE6就执行。
调用如下：
<font face="新宋体">window.onload = function() {<br /> enablePngImages();<br />}</font>为什么要用window.onload呢？这是表示加载完页面内容再执行指定的函数，保证png图片加载完成了再执行。
做了个演示页面：http://www.54caizi.org/demo/enablePngImages.html