解决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=\"" + "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">
/*涂聚文注示：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; 
width: 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>

 

posted @ 2012-03-01 11:06  ®Geovin Du Dream Park™  阅读(553)  评论(0)  编辑  收藏  举报