首先给大家展示效果图：
JS代码：
<!--[if IE 6]>
<script src="https://www.jb51.net/~/Scripts/UI/DD_belatedPNG.js"></script>
<script>
$(function () {
//1、通过公共类
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
//2、直接用选择器：类名，ID，标签
DD_belatedPNG.fix(".imgpng,img");
});
</script>
<![endif]-->
html代码：
<div>
<h1>DD_belatedPNG实现IE6下的透明背景</h1>
<div>
<h2>1、通过公共类pngFix</h2>
<p>
window.onload = function () {
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
</p>
<img src="" alt="" />
<div></div>
</div>
<div>
<h2>2、直接用选择器：类名，ID，标签实现</h2>
<p>
DD_belatedPNG.fix(".imgpng,img");
</p>
<img src="" alt="" />
<div></div>
</div>
</div>
css代码：
<style> .contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; } .contain .con { width: 400px; float: left; } .contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; } .contain h2 { font-size: 16px; color: #333; } .imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); } </style>
ie6中的透明图片不是透明显示的解决方案
一些图片存在着浏览器的兼容性，本身是透明的图片在ie6中却是不透明，比如：
在ie6中的效果
正常显示的效果
针对以上情况只需要在代码中最后加上下面这一段代码就可以解决了
<!--[if IE 6]> <script type="text/javascript"> function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } correctPNG(); </script> <![endif]-->
IE6PNG透明解决方案
一、使用滤镜 代码：
#pics { background:url(../images/Logo.png)no-repeat; /*以下为IE6设置PNG透明代码*/ _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png"); }
提示：如果需要使其支持链接的hover，那么需要在CSS中定义：cursor:pointer;使其呈现手型，否则将为默认的鼠标状态。
优点：
1、绿色无插件；
2、效率高，速度快；
3、网速慢的时候，不会出现先灰底再透明的情况，支持远程图片；
4、支持Hover等伪类，但是得使用两张图片，网速慢的情况下，会导致第二张图片暂时无法显示，因为还没有完全载入；
缺点：
1、不支持平铺，虽然filter有sizingMethod="scale", 拉伸缩放模式，但是图片会变形，如果单纯的颜色或简单的渐变色还能横向平铺；
2、不支持Img标签；
3、不支持CSS Sprite；
使用情况：
1、当没有img引入png时可考虑；
2、当没有CSS Sprite需求时可考虑；
3、当没有平铺需求时候可考虑；
二、利用JS解决html中的img(插入在网页中的png图像)png背景灰问题
页面中插入一段js即可。原理同上，只是将img标签用<span>标签替换掉，并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。