打印

HO3004: IE6 不支持 PNG24 格式图片的半透明效果

作者:钱宝坤

标准参考

问题描述

PNG24 格式图片可以携带 Alpha 半透明通道,以便呈现从透明到不透明间过渡色彩效果,但是 IE6 不支持这种格式原有的透明特性。

造成的影响

带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色,不具有半透明效果。

受影响的浏览器

IE6  

问题分析

分析以下代码:

    <body style=" background-color:#00FF00">
  <h3>透明背景的 PNG8 格式图片</h3>
  <img src="png8.png" />
  <h3>具有半透明过度背景的 PNG24 格式图片</h3>
  <img src="png24_alpha.png" />
  <h3>没有透明效果的 PNG24 格式图片</h3>
  <img src="png24_no_alpha.png" />
    </body>

以上代码向页面引入 PNG8 和 PNG24 图片,其中 PNG8 格式图片背景透明,PNG24 格式图片第一张具有半透明通道,第二张不具有透明度通道。

各浏览器显示效果如下:

  IE6 IE7 IE8 Firefox Safari Chrome Opera
PNG8 透明背景图
PNG24 半透明通道图
PNG24 无透明通道图

对照上表可见, IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时,错误的将半透明通道渲染成灰色。其他浏览处理正常,无此问题。

解决方案

  • 使用 IE 专有滤镜 AlphaImageLoader Filter 来修复 IE6 透明通道问题,详情请参考 MSDN 说明: http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx
  • 或者使用脚本批量处理方式:
    function fixpng24(){
        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];
              if (img.src.toLowerCase().slice(-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:pointer;" + 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--;
              }
           }
        }
    }
    

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 4.0.302.3 dev
Safari 4.0.4
Opera 10.51
测试页面: ie6_png24_alpha.html
本文更新时间: 2010-08-05

关键字

PNG alpha 通道 透明 半透明