解决ie6下png不透明，出现灰色背景的问题

png图片不透明分两种：

第一种：通过css的background属性引入的png背景图片

解决思路：

1.只需要png背景的元素css中添加微软特有的滤镜就可以了。

2.span{

background:url('../image.png') no-repeat left top;

_background: none;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop',src='图片路径');

}

3.此图片路径若为相对路径，则是html文件的相对路径，而不是css文件的相对路径。也可以使用绝对路径。

第二种：在html页面中通过img插入的图片
解决思路：
1.引入下面的js文件即可
<!--[if IE 6]>
<script>
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;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

2.上面的js代码的意思：在ie6浏览器中，用span替代img，将img的src路径转换成span的内联样式filter滤镜src，设置span为display:inline-block,将span的宽高设置成img的width,height，通过sizingMethod='scale'控制图片的显示的大小。

3.sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。

image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale : 缩放图片以适应对象的尺寸边界。

例子：比如<div>资源配置</div>通过css的background属性引入小三角形png图片。
使用 sizingMethod=‘crop’，图像文字都能正常显示
使用 sizingMethod=‘scale’，文字能正常显示，图片被放大占满整个div
使用 sizingMethod=‘image’，图片能正常显示，文字不显示

如图所示：

转载地址：
<a href="http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html">http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html</a>
<a href="http://wenku.baidu.com/view/77ceb31efc4ffe473368aba3.html">http://wenku.baidu.com/view/77ceb31efc4ffe473368aba3.html</a>