IE6图片有白底解决方法

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]–>

    <!--[if IE 6]> <script type="text/javascript">      $(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;                }            });        });</script> <![endif]-->

方法有很多，如果大家找到了其他可以拿去来分享下哦

1楼ad741258789昨天 12:34

升级IE。。。。。嘿嘿。。。。。

Re: ysq5202121昨天 14:17

回复ad741258789nIE6 份额还是挺大的，所以有些兼容还是要做的。