当前位置：首页 → 问答吧 → 【分享】你还在为IE6 不支持 PNG24 格式图片的半透明效果而烦恼吗？

【分享】你还在为IE6 不支持 PNG24 格式图片的半透明效果而烦恼吗？

时间：2010-09-08

来源：互联网

问题
烦恼的原因，IE6 不支持 PNG24 格式图片的半透明效果，答http://topic.csdn.net/u/20100902/13 /8bc405a1-2814-4ddc-b9d7-b697430d84c0.html?97270帖子问。

透明透明
透明，在设计里可以实现比较漂亮的效果，可以让你的页面有一种立体感，朦胧感。关于透明的实现可以使用CSS和IE的filer来完成，但，对于一个图片不同部位不同的透明度就不好实现了，这是就要借助图片来实现了。

我们知道，png是无损压缩，而且对透明支持的很好。所以，一般都会选择此格式的图片来展示透明效果。PNG24 格式图片可以携带 Alpha 半透明通道，以便呈现从透明到不透明间过渡色彩效果，但是用此种图片的问题在于： IE6 不支持这种格式原有的透明特性，而且带有半透明通道的 PNG24 格式图片在 IE6 中通道颜色被显示成灰色，不具有半透明效果。

例子
HTML code

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h3>透明背景的 PNG8 格式图片</h3>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png8.png"/>

<h3>具有半透明过度背景的 PNG24 格式图片</h3>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_alpha.png"/>

<h3>没有透明效果的 PNG24 格式图片</h3>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_no_alpha.png"/>
</body>
</html>

效果比较图：

可见
IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。

解决
HTML code

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
       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];
                   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;
                   }
               }
           }
       }
       window.onload=function(){
           fixpng24();
       }
    </script>
</head>
<body style="background-color:yellow;">
<br/>透明背景的 PNG8 格式图片<br/>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png8.png"/>

<br/>具有半透明过度背景的 PNG24 格式图片<br/>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_alpha.png"/>

<br/>没有透明效果的 PNG24 格式图片<br/>
<img src="http://www.w3help.org/zh-cn/causes/H/O/3/004/png24_no_alpha.png"/>
</body>
</html>