去掉IE6图片有白底办法

　2012-11-21 14:08:32　来源：WEB开发网　　　

核心提示： 由于IE6浏览器不支持PNG格式图片背景透明，所以有时候如果有PNG图片背景又想它透明怎么办呢？有几个做法：1.直接转换图片格式：将PNG格式转成其他格式，去掉IE6图片有白底办法，或者重新制作其他格式图片，比如GIF图片格式图片，现在我们回到步骤一中的html文件，然后我们来读取之前创建的所有样式表，那么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]-->

1 2 下一页