最近的在工作中也有遇到png图片在ie6下面不透明，会出现灰色的一方块背景的问题。
Code
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript"><!--
function fixPng() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
for(var i=0; i<document.images.length;></document.images.length;> var img = document.images[i];
var imgimgName = img.src.toUpperCase();
if (imgName.indexOf(".PNG") > 0) {
var width = img.width;
var height = img.height;
var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
img.src="images/blank.gif" mce_src="images/blank.gif";
img.width = width;
img.height = height;
}
}
}
}
// -->
</script>
</head>
<body>
<img src="pic.png" mce_src="pic.png" onload="fixPNG(this)" />
</body>
</html>
Code
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景图为png时</title>
<mce:style type="text/css"><!--
.pic{
height: 150px;
width: 150px;
background-image: url(pic.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
--></mce:style><style type="text/css" mce_bogus="1">.pic{
height: 150px;
width: 150px;
background-image: url(pic.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png'); /* IE6 */
_ background-image: none; /* IE6 */
}</style>
</head>
<body>
<div class="pic"></div>
</body>
</html>
以前我的解决方法是直接把png的图片换成gif，但是这样会使得有些图片出现锯齿，影响了美观。
于是去网上搜了解决这个问题的办法：
Code<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript"><!--
function fixPng() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
for(var i=0; i<document.images.length;></document.images.length;> var img = document.images[i];
var imgimgName = img.src.toUpperCase();
if (imgName.indexOf(".PNG") > 0) {
var width = img.width;
var height = img.height;
var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
img.src="images/blank.gif" mce_src="images/blank.gif";
img.width = width;
img.height = height;
}
}
}
}
// -->
</script>
</head>
<body>
<img src="pic.png" mce_src="pic.png" onload="fixPNG(this)" />
</body>
</html>
此方法解决了页面中直接插入png图片的背景透明问题，
接着就解决当png作为背景图片时的png图片背景透明问题：
Code<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景图为png时</title>
<mce:style type="text/css"><!--
.pic{
height: 150px;
width: 150px;
background-image: url(pic.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
--></mce:style><style type="text/css" mce_bogus="1">.pic{
height: 150px;
width: 150px;
background-image: url(pic.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png'); /* IE6 */
_ background-image: none; /* IE6 */
}</style>
</head>
<body>
<div class="pic"></div>
</body>
</html>
经过验证此方法也成功了!
浙公网安备 33010602011771号