总结归纳：如何让ie6支持png透明-优快云博客

本文介绍了两种使IE6支持PNG透明的方法：JS方法可一次性解决页面内的PNG透明问题，但可能出现闪动；CSS方法无需闪动，适用于背景PNG，但在某些情况下效果有限。

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

网上关于如何让ie6支持png透明的文章很多，不过大体上相关无异，看来看去还是那些内容，今天我简单的整理了一下，希望对大家有帮助。

关于让ie6支持png透明主要分为JS和CSS两种方法，各有优点和缺点，所以还要大家在用的时候根据自己的需求进行选择。

JS方法、优点：可以一段代码解决整个页的png透明问题，缺点：对于IMG有效，对于png背景的效果不佳，况且要等页面打开后才能执行，会有一个闪动，体验非常不好。

CSS方法、优点：无需闪动即可看到效果，对于使用PNG做为背景的层有着很好的可操作性，缺点：IMG标签无效，对于使用了background-position背景定位的层效果不理想。

下面我将罗列一下我收集到的如何让ie6支持PNG透明的代码：

如何让ie6支持png透明-JS方法

仅用于IMG标签：如果仅仅是为了能让img标签中的PNG透明，那么可以直接在网页中插入以下代码即可：

<script language="javascript" type="text/javascript">

function correctPNG() {

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.attachEvent("onload", correctPNG);</script>

这种方法只适用于IMG的PNG透明，如果要让使用了Png背景的DIV也能使用透明，就要使用专用的ie6pngFix了，首先请下载文件：

http://www.stou.info/iepngfix_tilebg.js和文件：http://www.stou.info/iepngfix.htc，并把它们放在你的网站根目录，然后在你的网页下插入下以下代码：

document.write("<scr"+"ipt src=\"\/iepngfix_tilebg.js\"></scr"+"ipt>");

document.write("<style>img, div, input{ behavior: url(\"iepngfix.htc\")

}</style>");

</script>

不过这种方式我并不推荐使用，对于浏览器的开销很大，如果你明白css的expression你就应该知道这段代码的消耗了，不停的执行执行……。对于上面的两种JS方式我都不推荐使用，如果实在有这个需求可以考虑使用第一种，而PNG的背景透明我建议你使用下面的CSS方法。

如何让ie6支持Png透明-CSS方法：

使用CSS的filter和IE的hack可以快速有效实在ie6的png透明效果，看下面的代码：

#header .logo a

 {
background : url(images/logo_twitter.png) no-repeat;
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='http://www.stou.info/themes/wopus/style/images/logo_twitter.png');

其中红色部分就是专门为ie6写的hack，从而实现ie6的png透明效果。其中src后面是png图片的绝对地址，详细使用介绍请参考http://apps.hi.baidu.com/share/detail/22187180

虽然这种方式能解决大部分问题，不过如果对于下面这样的div，上面这种方法估计就不行了。

#header .logo a {background : url(images/logo_twitter.png) -20px -8px no-repeat;

因为使用了背景定位切割，原始的滤镜只能加载整张图片并不能定位，那又应该怎么解决实现透明呢？一次偶然的机会在看腾讯微博的CSS中发现他们竟然也实现了定位！看下面的代码：

#header .logo a { background : url(images/logo_twitter.png) -20px -8px no-repeat;
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='http://www.stou.info/themes/wopus/style/images/logo_twitter.png');
_padding-left:20px;_margin-left:-20px;_padding-top:8px;_margin-top:-8px}

竟然这样也能实现定位，不过好像并不是一定有效，对于它的使用环境我还没有熟悉，不过这种方式确实值得探索。

转载于:https://www.cnblogs.com/wangziwan/archive/2011/10/13/2210478.html