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

4.通过脚本：其实这种方式和上面原理一样。

    <!--[if IE 6]> 
    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]-->

下面这种是需要有JQUERY

    <!--[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]-->

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

IE6图片有白底解决办法

猜你喜欢