由於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]> 
    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]-->

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