IE6中 PNG 背景透明的最佳解决方案

为什么要使用 PNG 图片？

简 单来说，使用 PNG 格式比起 GIF 来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多。目前，最新的浏览器基本上都支持PNG格式。唯独有万恶的 IE6 不支持 PNG 背景透明，在 IE6 中的 PNG 背景图会显示一个灰色的背景。

IE6 中 PNG 背景图片透明的方法

其实方法有很多，但网络上提供的方法也有诸多缺陷。比如不支持 css 中 backgrond-position 与 background-repeat 等，所以园子推荐你使用 DD_belatedPNG，方法如下：

1.首先下载 DD_belatedPNG.js 文件，本文下方有提供下载，将此文件放置到你的网站中的 js 目录下。

2.在你使用了 PNG 背景的页面头部嵌入以下代码，一般是加在 head 区域。

 

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript">
    /* EXAMPLE */     
    DD_belatedPNG.fix('.png_bg');
    /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
</script>  
<![endif]-->

需要注意的一些问题：

1.如果你放置的 DD_belatedPNG.js 路径不同的话，也需要更改上述代码中的路径。

2.以上代码中的

 

DD_belatedPNG.fix('.png_bg');

 括号中的 .png_bg 改成你在 CSS 定义了 PNG 背景图片的选择器，多个选择器请用英文逗号隔开，如下行代码所示：

 

DD_belatedPNG.fix('.png_bg1, .png_bg2');

3.有些朋友可能需要用到透明的 PNG 图片做为鼠标经过时的背景图片，这就需要用到 a:hover 属性，在这种情况下就需要以“a:hover”来做选择器了，你可以参考下面代码的写法：

 

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">DD_belatedPNG.fix('.trans,.box a:hover');
</script>
<![endif]-->

通过以上两步就实现了 IE6 中 PNG 背景图片透明的效果，在使用过程中有什么问题给我留言哈。写在最后：我个人一直认为 IE6 早就该死了，在以前的文章中也声讨过，可是当我看到访问统计后台数据时，我真的很疑惑，IE6 真的该死了吗?在我的站点统计中使用 IE6 的使用率还保持着24% 左右的占有率。如果真的放弃了，那意味着会对这些喜欢古董的用户带来不好的体验。所以，园子认为，还是花些时间去专门为 IE6 去折腾下吧。