以前用到png图片的时候，总是担心，IE6下会出现的灰色背景，所以一直用gif格式的图片来替换png格式的图片，代码如下：
.pngImg {
background:url(image.png);
_background:url(image.gif);
}
在其他浏览器下调用的是图片image.png，IE6识别_,调用image.gif图片，这样做有些缺点，就是gif图片显示会有锯齿，边缘不平滑。
网上还有其他的方法来解决这个问题，如css滤镜，但是css滤镜不支持backgrond-position和background-repeat，后来在网上查找到了使用DD_belatedPNG，测试代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>png图片透明问题</title>
<style>
.png{
width: 100px;
height: 100px;
background: url(png.png);
}
.png2{
width: 100px;
height: 100px;
}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png');
DD_belatedPNG.fix('.png2');
</script>
<![endif]-->
</head>
<body>
<div class="png"></div><br><br>
<div><img class="png2" src="png.png"></div>
</body>
</html>
在IEtester下的测试效果如下：
DD_belatedPNG_0.0.8a-min.js的下载地址是：
http://dillerdesign.com/experiment/DD_belatedPNG/#download
DD_belatedPNG不仅可以用在img上还可以用在background上，并且支持backgrond-position和background-repeat。自己感觉这种方法很完美的解决了IE6下png图片透明这个bug。
扫一扫
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
