复制代码 代码示例:
<!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='#'" /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='#'" );
}
第二:JS方法:推荐此方法,支持position-repeat,支持img,支持a:hover等等。
复制代码 代码示例:
<!--[if IE 6]>
<script src='#'" /belatedPNG_IE6.js"></script>
<script>
DD_belatedPNG.fix('.png2,img,a:hover');
</script>
<![endif]-->
备注:引用belatedPNG_IE6.js时,如果一直报错“DD_belatedPNG未定义”,一定你的belatedPNG_IE6.js这个文件引错啦,或者路jing错啦。belatedPNG_IE6.js和
DD_belatedPNG.js可以实现同样的效果,只是文件名字不同,但是你所引的文件和你目录下的文件一定要一致。