参考:
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>
更多专业前端知识,请上 【猿2048】www.mk2048.com