查看完整版本 : 用 javascript 修复 IE 下 PNG 图片不能透明显示的方法[转]

豆豆猫
2008-07-31 11:56
PNG 是可携式网络图像Portable Network Graphics这三个单词的第一个字母的缩写。她和 GIF 一样支持透明背景，但其对透明的处理质量远远大于 GIF，逐渐成为网页制作者非常喜欢的一种图片格式。令人无奈的是，IE(5.5-6) 却不支持 PNG 图片的透明处理，本文介绍的方法就是针对这一问题的。

方法一: 单个透明修复
在html文档的<head></head>之间添加

代码:
<script language="Javascript">

<!--

function fixPNG(myImage)

{

        var arVersion = navigator.appVersion.split("MSIE");

        var version = parseFloat(arVersion[1]);

        if ((version >= 5.5) && (version < 7) && (document.body.filters)) {

                var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";

                var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";

                var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' ";

                var imgStyle = "display:inline-block;" + myImage.style.cssText;

                var strNewHTML = "<span " + imgID + imgClass + imgTitle

                + " style=\"" + "width:" + myImage.width

                + "px; height:" + myImage.height

                + "px;" + imgStyle + ";"

                + "filter:progidXImageTransform.Microsoft.AlphaImageLoader"

                + "(src='./../../\''" + myImage.src + "\', sizingMethod='scale');\"></span>";

                myImage.outerHTML = strNewHTML;

        }

}

//-->

</script>


用例:

代码:
<img src="apple.png" alt="PNG"  onload="fixPNG(this)"/>


方法二: 全体透明恢复
建立文件pngfix.js,内容为

代码:
var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])



if ((version >= 5.5 && version < 7) && (document.body.filters)) {

  for(var i=0; i<document.images.length; i++) {

    var img = document.images[i];

    if(img.src) {

      var imgName = img.src.toUpperCase();

      if (imgName.substring(imgName.length-3) == "PNG") {

        var imgID = (img.id) ? "id='" + img.id + "' " : "";

        var imgClass = (img.className) ? "class='" + img.className + "' " : "";

        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";

        var imgStyle = "display:inline-block;" + img.style.cssText;

        if (img.align == "left") imgStyle = "float:left;" + imgStyle;

        if (img.align == "right") imgStyle = "float:right;" + imgStyle;

        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;

        var strNewHTML = "<span " + imgID + imgClass + imgTitle

        + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

        + "filter:progidXImageTransform.Microsoft.AlphaImageLoader"

        + "(src='./../../\''" + img.src + "\', sizingMethod='scale');\"></span>";

        img.outerHTML = strNewHTML;

        i--;

      }

    }

  }

}


使用方法(建议在<head></head>之间添加):
代码:
<!--[if lt IE 7]>

<script defer type="text/javascript" src='./../../&'quot;pngfix.js"></script>

<![endif]-->
unicac
2008-09-08 10:21
很好！有时候想用PNG的图标，但是IE6主流的浏览器不能背景透明，

现在有解决的办法了~

豆猫
2008-09-08 11:14
使用滤镜的方法有缺陷
xo_tobacoo
2008-11-06 10:02

那到底完整有效的处理方式是什么？

tinxon
2008-11-07 00:54

我那坛子首页用了一种方法，好像不是这种的。

豆豆罗-多多罗
2009-06-02 17:30
根本不管用