IE6图片有白底解决办法

由于IE6浏览器不支持PNG格式图片背景透明，所以有时候如果有PNG图片背景又想它透明怎么办呢？

有几个做法：

1.直接转换图片格式：将PNG格式转成其他格式，或者重新制作其他格式图片，比如GIF图片格式图片，那么IE6是可以支持的。（PNG转换GIF可能会有锯齿）

2.给图片加入背景色：所谓的背景透明，其实也是一种颜色，电脑就是颜色展现出来的，那么可以给PNG格式图片加入你需要透明的颜色。

3.添加滤镜样式：可以给图片添加滤镜使得图片透明，此种方式只适合IE浏览器。方法如下

 

步骤一:HTML

我们可以先创建一个HTML文件，然后添加一个类名为”vehicles”的空div。

<div class=”vehicles”></div>

步骤二:样式表

下面来创建一个名为style.css的样式表并添加以下代码:

body { 
        background: url(body-bg.jpg); /* 添加基本背景图 */
} 
.vehicles { 
        width: 500px; 
        height: 176px; 
        background: url(vehicles.png) no-repeat; /* 为vehicles类添加背景图 */
}

步骤三:IE样式表

下面我们来创建另一个样式表，命名为IE.css。现在，我们都知道IE讨厌PNG文件，那我们就要在这里施展魔法了:

/* 注:我在vehicles类名前添加了”html”, 我这样做就不会使background属性与另一个样式表冲突了. */
html .vehicles {
        background: none; /* 隐藏当前背景图从而使用后面的滤镜重置它 */
        width: 500px; /* 必须指定宽度 */
        height: 176px; /* 必须指定高度 */
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’vehicles.png’);
}

步骤四:IE条件注释

这是最后一步。现在我们回到步骤一中的html文件，然后我们来读取之前创建的所有样式表。

在你的文件顶部中添加以下代码:

<link rel=”stylesheet” href=”styles.css” type=”text/css” /> 
<!–[if IE 6]>
    <link rel=”stylesheet” href=”IE.css” type=”text/css” /> 
<![endif]–>

/*
// 需要 <script type="text/javascript" src="/js/jquery.js"></script> 支持;
$(document).ready(function() {
	$("img").each(function()
	{
		var imgName = this.src.toUpperCase();
		if (imgName.substring(imgName.length - 3, imgName.length) == "PNG")
		{
			var imgID = (this.id) ? "id='" + this.id + "' " : "";
			var imgClass = (this.className) ? "class='" + this.className + "' " : "";
			var imgTitle = (this.title) ? "title='" + this.title + "' " : "title='" + this.alt + "' ";
			var imgStyle = "display:inline-block;" + this.style.cssText;
			if (this.align == "left") imgStyle = "float:left;" + imgStyle;
			if (this.align == "right") imgStyle = "float:right;" + imgStyle;
			if (this.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
			var strNewHTML = "<span " + imgID + imgClass + imgTitle
			+ " style=\"" + "width:" + this.width + "px; height:" + this.height + "px;" + imgStyle + ";"
			+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			+ "(src=\'" + this.src + "\', sizingMethod='image');\"></span>";
			this.outerHTML = strNewHTML;
		}
	});
});
*/

纯js:

<!--[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='image');\"></span>"
            img.outerHTML = strNewHTML
            i = i-1
        }
    }
}

window.attachEvent("onload", correctPNG);

</script>
<![endif]-->