解决IE6下PNG图片不透明的问题

解决IE6下PNG图片不透明的问题

IE6真是个烂浏览器,CSS方面已经一堆bug了,连这么优秀的png图片也不兼容,无法透明,透明部分会显示成灰色,倒。
有人会选择换成gif格式,但gif格式虽然可以做到透明,但会有毛边,很不美观,不爽。
在网上找到了几个方法,觉得这个方法最简单,才子修改了一下函数,直接针对IE6有效,其它浏览器不会执行此函数。也就不需要用到IE独有的条件注释来判断了。
看原代码:
 

<font face="新宋体">function enablePngImages() {<br />&nbsp;&nbsp; var imgArr = document.getElementsByTagName(&quot;IMG&quot;);<br />&nbsp;&nbsp; for(i=0; i&lt;imgArr.length; i++){<br />&nbsp;&nbsp;&nbsp;&nbsp; if(imgArr[i].src.toLowerCase().lastIndexOf(&quot;.png&quot;) != -1){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].style.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot; + imgArr[i].src + &quot;', sizingMethod='auto')&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].src = &quot;images/none.gif&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br /><br />&nbsp;&nbsp;&nbsp;&nbsp; if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(&quot;.png&quot;) != -1){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].style.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot;+img+&quot;', sizingMethod='crop')&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].style.backgroundImage = &quot;url(images/none.gif)&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp; }<br />}</font>

原理就是通过 javascript 和 css 滤镜来解决。images/none.gif是一张空白一个像素的图片。
调用时要采用IE独有的条件注释来判断,如下:
 

<font face="新宋体">&lt;!--[if lt IE 7]&gt;<br />&lt;script type='text/javascript'&gt;<br />enablePngImages();<br />&lt;/script&gt;<br />&lt;![endif]--&gt;</font>

才子觉得这样调用不太方便,改了一下函数,添加了判断IE浏览器版本的代码,调用更方便。看代码:
 

<font face="新宋体">function enablePngImages() {<br />&nbsp;&nbsp; var imgArr = document.getElementsByTagName(&quot;IMG&quot;);<br />&nbsp;&nbsp; var version = parseFloat(navigator.appVersion.split(&quot;MSIE&quot;)[1]);<br /><br />&nbsp;&nbsp; if (version = 6.0 &amp;&amp; (document.body.filters)) {<br />&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0, j=imgArr.length; i&lt;j; i++){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(imgArr[i].src.toLowerCase().lastIndexOf(&quot;.png&quot;) != -1){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].style.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot; + imgArr[i].src + &quot;', sizingMethod='auto')&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].src = &quot;images/none.gif&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(&quot;.png&quot;) != -1){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].style.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot;+img+&quot;', sizingMethod='crop')&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgArr[i].style.backgroundImage = &quot;url(images/none.gif)&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp; }<br />}</font>

加了判断IE版本的代码,如果为IE6就执行。
调用如下:
 

<font face="新宋体">window.onload = function() {<br />&nbsp;&nbsp; enablePngImages();<br />}</font>

为什么要用window.onload呢?这是表示加载完页面内容再执行指定的函数,保证png图片加载完成了再执行。

做了个演示页面:http://www.54caizi.org/demo/enablePngImages.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据