用 javascript 修复 IE 下 PNG 图片不能透明显示的方法

最新推荐文章于 2024-10-25 13:52:23 发布

yangna01314

最新推荐文章于 2024-10-25 13:52:23 发布

阅读量686

点赞数 1

分类专栏： javascript 文章标签： javascript ie 脚本 filter float comments

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文提供了一种使用JavaScript解决IE浏览器中PNG图片透明显示问题的方法。适用于IE5.5至6.0版本，通过修改图片标签实现正确透明效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在需要的时候修复

用 javascript 修复 IE 下 PNG 图片不能透明显示的方法 – 示例

 
 // 说明：修复 IE 下 PNG 图片不能透明显示的问题

 
 // 整理：http://www.CodeBit.cn

 
 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:progid:DXImageTransform.Microsoft.AlphaImageLoader"

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

 
         
 myImage.outerHTML = strNewHTML;

}

}

在页面中需要用到 PNG 图片的地方，添加

οnlοad="fixPNG(this)"

一次性修复页面上所有的 png

 
 // 说明：用 javascript 修复 IE 下 PNG 图片不能透明显示的方法

 
 // 整理：http://www.CodeBit.cn

/*

 
 Correctly handle PNG transparency in Win IE 5.5 & 6.

 
 http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

 
 Use in <HEAD> with DEFER keyword wrapped in conditional comments:

 
 <!--[if lt IE 7]>

 
 <script defer type="text/javascript" src="pngfix.js"></script>

 
 <![endif]-->

*/

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

 
 var 
  version = parseFloat(arVersion[1])

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

{

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

{

 
 var 
  img = document.images[i]

 
 var 
  imgName = img.src.toUpperCase()

 
       
 if 
  (imgName.substring(imgName.length-3, imgName.length) == 
 "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:progid:DXImageTransform.Microsoft.AlphaImageLoader"

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

 
          
 img.outerHTML = strNewHTML

 
          
 i = i-1

}

}

}

将上面的代码另存为 js 文件，然后在页面中插入：

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

因为 png 图片只有在 IE 中才会有不透明的问题，所以只需在用 IE 浏览时才加载代码，注意要在调用代码中加上 DEFER 关键词，这样会延迟代码执行时间。

它告诉浏览器Script段包含了无需立即执行的代码，并且，与SRC属性联合使用，它还可以使这些脚本在后台被下载，前台的内容则正常显示给用户。

请注意两点：

1、不要在defer型的脚本程序段中调用document.write命令，因为document.write将产生直接输出效果。

2、而且，不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

转载：http://www.codebit.cn/javascript/fix-png.html