原文地址：http://blog.csdn.net/mosliang/article/details/6760028

相信如何解决png在ie6下透明的问题困扰了很多人。为了追求更好的页面效果，很多人喜欢使用png格式的图片，恰恰因为ie6下png图片的透 明问题，很多人不得不退而求其次地改用gif格式的图片。今天就来介绍一个ie6下png透明的解决办法，支持background（含 position、repeat、img src）。

1、 DD_belatedPNG简介：

DD_belatedPNG是一个免费的js库，它的作用是让png格式图片在ie6下透明，支持<IMG>中的src元素；在背景应 用上支持css的background-image属性，当然包含最重要的是支持background-position和background- repeat，对于喜欢CSS Spirit的人来说是个好消息。

2、 实现原理：

使用Microsoft VML替代AlphaImageLoader滤镜，好处就是支持position和repeat，完美支持实现流行的CSS Spirit（CSS雪碧）。

3、 使用方法：

在<header>与</header>之间添加如下代码：

DD_belatedPNG.fix(‘.class, #id’); 这里，请将.class和#id改成你的class和id，并支持多个class和id

4、 JS文件下载：

DD_belatedPNG_0.0.8a未压缩版：点击下载
DD_belatedPNG_0.0.8a压缩版：点击下载

<!--[if IE 6]>

<script>

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>

<![endif]--> ​

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

      function enablePngImages()

      { var imgArr = document.getElementsByTagName("IMG");

        for(i=0; i<imgArr.length; i++){

        if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1)

        {

          imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";

          imgArr[i].src = "spacer.gif";

        }

          if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1)

          {

            var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);

            imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";

            imgArr[i].style.backgroundImage = "url(spacer.gif)";

          }

        }

    }

      function enableBgPngImages(bgElements)

      {

      for(i=0; i<bgElements.length; i++)

        {

        if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1)

        {     //alert(bgElements[i]);

        var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);

        bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";

        bgElements[i].style.backgroundImage = "url(spacer.gif)";

    }

      }

      }

        </script>

        <img src="pngpic.png" alt="" border="0" />

        <!--[if lt IE 7]>

        <script type='text/javascript'>

        var bgElements; enablePngImages(); if(bgElements){    enableBgPngImages(bgElements); }

        </script>

        <![endif]-->

    .pngImg {behavior: url(iepngfix.htc);}