实现ie6下png图片背景透明的几种方法

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-03 22:12:30　-　阅:　-　评:0　-　积分:0

图片是一个网站中必不可少的一部分，图片的格式有多种。在多种格式中，我们更喜欢用png格式的图片。但在ie6下，好看的背景却显得很残缺，要知道一个设计者不能如愿将作品展现出来是件多么令人遗憾的事情。言归正传，下面来分享实现ie6下png图片背景透明的几种方法，轻松将你梦圆。

正常情况下，png图片在ie6下是这样的，如下图：
正常情况下，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>
<meta name="author" content="艺灵设计, yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0;padding:0;}
p{width:200px; height:50px; line-height:50px;
background:#666 url(../../../../skin/yilingsj/image/chm.png) no-repeat; text-indent:40px;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="chm.png");_background:none;}
</style>
</head>
<body>
<p>这个是背景</p>
</body>
</html>

效果图：
使用滤镜后，图片在ie6下背景透明
怎么样，背景透明的问题解决了吧。(提示：此方法只针对背景图片有效)

方法二：使用"unitpngfix.js"插件。源码如下：

在线演示<!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>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<script type="text/javascript" src="../../../../skin/yilingsj/js/unitpngfix.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
div,p{ width:200px; height:50px; line-height:50px;background:#666; color:#fff; margin-bottom:5px;}
p{background:#666 url(../../../../skin/yilingsj/image/chm.png) no-repeat; text-indent:40px;}
</style>
</head>
<body>
<div><img src="../../../../skin/yilingsj/image/chm.png" />这个是图片</div>
<p>这个是背景</p>
</body>
</html>

效果图：
使用unitpngfix.js插件，图片在ie6下背景透明

方法三：使用"iepngfix_tilebg.js"插件。源码如下：

在线演示<!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>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<script type="text/javascript" src="../../../../skin/yilingsj/js/iepngfix_tilebg.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
div,p{ width:200px; height:50px; line-height:50px;background:#666; color:#fff; margin-bottom:5px;}
p{background:#666 url(../../../../skin/yilingsj/image/chm.png) no-repeat; text-indent:40px;}
div,p{ behavior:url(iepngfix.htc)}
</style>
</head>
<body>
<div><img src="../../../../skin/yilingsj/image/chm.png" />这个是图片</div>
<p>这个是背景</p>
</body>
</html>

效果图：
使用unitpngfix.js插件，图片在ie6下背景透明

也许你会觉得奇怪，为什么都是背景图片透明，而网页中的图片不能透明。不要急，接下来，将给出终极法定，图片、背景全ok。方法四：使用"DD_belatedPNG_0.0.8a.js"插件。源码如下：

在线演示<!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>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<script type="text/javascript" src="../../../../skin/yilingsj/js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div,p,image,background');
</script>
<style type="text/css">
*{margin:0;padding:0;}
div,p{ width:200px; height:50px; line-height:50px;background:#666; color:#fff; margin-bottom:5px;}
p{background:#666 url(../../../../skin/yilingsj/image/chm.png) no-repeat; text-indent:40px;}
</style>
</head>
<body>
<div><img src="../../../../skin/yilingsj/image/chm.png" />这个是图片</div>
<p>这个是背景</p>
</body>
</html>

效果图：
使用DD_belatedPNG_0.0.8a.js插件，图片在ie6下背景透明
读到此处，我知道的四种方法已经讲完。综合上面的各种方法，个人感觉用最后一种比较好。读者可以根据自己需要来使用其中任一种方法。为了方便读者应用，下面附上四种方法的使用格式：
方法一：p{background:url(chm.png) no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="chm.png");/*ie6，此处的路径是终极目录下*/ _background:none;}
方法二：直接加载"unitpngfix.js"即可。
方法三：先加载"iepngfix_tilebg.js"，然后在样式里面写上div,p{ behavior:url("iepngfix.htc")}，此处的“div,p”都是选择器，读者可根据需要写上相应位置的选择器。
方法四：先加载"DD_belatedPNG_0.0.8a.js"，然后在网页中加入<script type="text/javascript">
DD_belatedPNG.fix('div,p,image,background');/*'选择器,应用类型'*/ /*如果不写background的话，png背景图片将不被渲染。*/
</script>

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-03/67.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！