<!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>IE6下png透明最好用的方法</title>
<style type="text/css">
.png1,.png2,a:hover{width:200px; height:200px; url(fontbg.png);}
.png1{
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fontbg.png" );
}
</style>
<!--[if IE 6]>
<script src="js/belatedPNG_IE6.js"></script>
<script>
DD_belatedPNG.fix('.png2,img,a:hover');
</script>
<![endif]-->
</head>
<body>
<div class="png1">aaaaaaaaaaaa</div>
<div class="png2">aaaaaaaaaaaa</div>
<div id="png2">
<img src="fontbg.png" />
<img src="fontbg.png" />
<img src="fontbg.png" />
<img src="fontbg.png" />
<img src="fontbg.png" />
</div>
<div><a href="#">支持a:hover</a></div>
</body>
</html>上面是一个实例。
我经常用到这两个方法来使png图片在IE6下实现透明。
第一：CSS方法：这个简单，代码少，但是不支持position-repeat，不支持img标签。
.png1{
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fontbg.png" );
}
第二：JS方法：这个方法我很推荐，支持position-repeat，支持img，支持a:hover等等。
<!--[if IE 6]>
<script src="js/belatedPNG_IE6.js"></script>
<script>
DD_belatedPNG.fix('.png2,img,a:hover');
</script>
<![endif]-->
温馨提示：在引用belatedPNG_IE6.js时，如果一直报错“DD_belatedPNG未定义”，那肯定是你的belatedPNG_IE6.js这个文件引错啦，或者路劲错啦。belatedPNG_IE6.js和DD_belatedPNG.js可以实现同样的效果，只是文件名字不一样，但是你引的文件和你目录下的文件一定要一致。
