解决IE6下透明PNG图片有灰底的解决方案

参考:

http://jquery.andreaseberhard.de/pngFix/
http://www.dillerdesign.com/experiment/DD_belatedPNG/#background_properties
http://www.iteye.com/topic/864893
http://www.cnblogs.com/heiniuhaha/archive/2011/11/23/2260146.html
http://blog.donews.com/jiji262/2011/05/ie6-png-fix/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>解决IE6下透明PNG图片有灰底的</title>
<script language="javascript" type="text/javascript"> 
/*
参考:http://jquery.andreaseberhard.de/pngFix/
http://www.dillerdesign.com/experiment/DD_belatedPNG/#background_properties
http://www.iteye.com/topic/864893
http://www.cnblogs.com/heiniuhaha/archive/2011/11/23/2260146.html
http://blog.donews.com/jiji262/2011/05/ie6-png-fix/
*/
//涂聚文注示:注意,这方法也是只对直接插入的顯示图片有效,对背景图无效
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=\"" + "" + 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">
/*涂聚文注示:IE6背景图片透明显示方式*/
.Image{
/*
这种方式也可以
background-image: url(images/101.png)!important;/* FF IE7 */ 
/*	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/101.png"); 
    _ background:none;  
*/
height: 55px; 
 172px; 
background-image: url(images/101.png)!important;/* FF IE7 */ 
background-repeat: no-repeat; 
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/101.png'); /* IE6 */ 
_ background-image: none; /* IE6 */ 

}
.bg1 {
	background-repeat: repeat;
	background-position: right top;
	background-image: url(images/bg.jpg);
}
body {
	background-image: url(images/206.png);
}

</style>
</head>

<body class="bg1">
背景图片:
<div class="Image"></div>
<br/>
<table width="937" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/101.png" name="Image1" class="Image1" width="172" height="55" border="0" id="Image1" /></td>
</tr>
</table>
</body>

</html>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)成功.---Geovin Du(涂聚文)
原文地址:https://www.cnblogs.com/geovindu/p/2375191.html