让IE6支持png 透明的多种解决方法

有时候我们会用半透明png格式的图片做为背景图，来达到一定的设计和视觉效果，但在IE6下是不支持透明png图片的。

可参阅http://www.alistapart.com/articles/pngopacity/

综合网上的解决方法，和自己的实例，有以下方法：
一：
那么就可以用到Microsoft 的专有滤镜如下：
.class
{
　filter: progid:DXImageTransformMicrosoft.AlphaImageLoader(enabled=true, src="/img/bg_alpha.png");

background:none;
}
由于对web 标准支持较好的Firefox等浏览器不识别“progid:DXImageTransform.Microsoft.AlphaImageLoader

(enabled=true, src="/img/bg_alpha.png”，而Firefox是支持透明png的，所以css样式需要这样写：
.class{
width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,

src="http://imgcache.qq.com/MiniMusic_v1_2/act/avril/img/mv_listitem_bg.png"); background:none;
}

* html .class
{
width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,

src="http://imgcache.qq.com/MiniMusic_v1_2/act/avril/img/mv_listitem_bg.png"); background:none;
}

这样就完成了兼容Firefox和IE6的透明png背景图片。
但还有一个问题，当你在有这样定义的容器标签里包含一些超链接的时候，就会发现在IE6中，这些A标记是无效的，解

决这个问题只需要在A标记的css样式单里加上一句：position:relative;
如下：
a{
color:#000;
text-decoration:none;
position:relative;
}
至此上述问题得到解决，目前只发现position:relative;这一种方法，如果你发现了其它的解决方案，请一定要拿出来

共享一下啊~

实例代码

#biaoqingtiao .span1 a,a:link{
position:absolute;
top:4px;
left:7px;
width:19px;
height:19px;
background:url(../images/1.png);
display:block;
}
* html #biaoqingtiao .span1 a,a:link
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/1.png");
background:none;
}

图片 1.png就透明了。嘿嘿

二：

FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写

法不一样，本例中，icon_home.png图片与html文件在相同目录）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html showLinkBubble(this);return false" href="http://www.w3.org/1999/xhtml" target=_blank

link="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div class="qq"></div>
</body>
</html>

第 2 种方法: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）

注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用，否则会导致页面打开很慢!!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html showLinkBubble(this);return false" href="http://www.w3.org/1999/xhtml" target=_blank

link="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?

(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "',

sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg

:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "',

sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
</style>
</head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>

三：

第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有

效，对背景图无效）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html showLinkBubble(this);return false" href="http://www.w3.org/1999/xhtml" target=_blank

link="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
     var arVersion = navigator.appVersion.split("MSIE")
     var version = parseFloat(arVersion[1])
     if ((version >= 5.5) && (document.body.filters))
     {
       for(var j=0; j<document.images.length; j++)
       {
           var img = document.images[j]
           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
             j = j-1
           }
       }
     }
}
window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">

</style></head>
<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" />
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>

四：

";
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;
} }

window.onload=function(){
document.getElementById("top").style.height=screen.height/5+"px";

}//
</script>

用法如下：
<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />

另：

用Js实现IE6支持png图片透明效果
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
    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
    }
}
使用方法 :

在模板的<HEAD> 段里加上[注意你的路径.]

在要透明的 png 的地方格式为:

<img src="xyz.png" alt="foo" width="10" height="20" onload="fixPNG(this)">
注意, 你的图片的高与宽是不能去掉的! 就是多了 onload="fixpng(this)" 而已.