解决IE6的PNG透明JS插件使用介绍

IE6 PNG透明问题背景

IE6浏览器下的PNG透明问题由来已久，近期有用户咨询是否有最佳的解决方案。尽管作者一直使用并认可DD_belatedPNG这一插件，但今日特整理相关使用说明分享出来。

此前博客中曾介绍过一款jQuery实现的PNG处理插件，但该方案无法支持背景图片的平铺效果。

DD_belatedPNG借助微软的VML语言对PNG图像进行重新渲染，从而实现半透明视觉效果。它不仅支持background-position和background-repeat属性，还能兼容伪类状态，是一款值得推荐的实用工具，且使用门槛较低。

DD_belatedPNG插件使用方法

具体操作步骤如下：

 
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

调用函数为DD_belatedPNG.fix()，需将括号内的'.png_bg'替换为你实际使用的CSS选择器名称。

若需针对ID选择器进行配置，示例如下：

 
DD_belatedPNG.fix('#png');

针对伪类状态的处理示例：

 
DD_belatedPNG.fix('.png a:hover,.png a:focus');

针对img标签的处理示例：

 
DD_belatedPNG.fix('img');

若需同时处理多个选择器，只需在括号内用英文逗号分隔即可。例如：

 
DD_belatedPNG.fix('.png_bg,#png,.png a:hover,.png a:focus,img');

另一种常见的引入方式如下：

 
<!--[if IE 6]>
<script type="text/javascript" src="js/dd_png.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.tel,.head_content');
</script>
<![endif]-->

注意括号内填写的是CSS样式选择器，多个选择器之间使用逗号分隔。

插件下载与资源获取

JS文件下载地址：

0.0.8a-min.js (压缩版)