png图片IE6下实现透明的实例

发布时间:2020-10-09编辑:脚本学堂
png图片IE6下透明如何实现的?请看下面的实例吧。

 

复制代码 代码示例:
<!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可以实现同样的效果,只是文件名字不同,但是你所引的文件和你目录下的文件一定要一致。