Browsed by
标签: PNG

解决IE6下PNG图片不透明的方法二

解决IE6下PNG图片不透明的方法二

<script language="javascript" type="text/javascript">
 function setPng(img, w, h) {
  ua = window.navigator.userAgent.toLowerCase();
  if(!/msie/.test(ua))
   return;
  imgStyle = "display:inline-block;" + img.style.cssText;
  strNewHTML = "<span style=\"width:" + w + "px; height:" + h + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale');\"></span>";
  img.outerHTML = strNewHTML;
 }
 </script>

  <div class="float_l" style="width:18px;height:18px;margin:11px 4px 0 2px;">
  <a href="upload/200906251215516101.png" border="0" onload="setPng(this, 18, 18);" /></a>
 </div>

解决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