IE6下png圖檔和png背景透明

今天做頁面又一次遇到了png圖檔和png背景解決ie6不相容的問題，前些天都是引用以前有位同僚調試好的插件，但這次沒法引用那個插件了，隻好這次親自去解決一下，下面的内容完全可以把png圖檔和png背景不透明的效果解決掉并且各浏覽器相容，感覺用着還友善 就給大家分享一下。

應用PNG圖檔的透明或半透明的特性能做出非常漂亮的網頁來。Firefox和Opera對PNG的支援非常的好，都是IE卻無視PNG圖檔這一特性的“存在”，雖然IE7已經支援都是IE6還是不行。查了一些資料，基本解決了這一問題，準備應用到PJskin上。

雖然有讓IE6支援PNG透明背景的JS程式，都是不是很友善，還是用CSS來實作的好。使用到的就是：

IE5.5+的AlphaImageLoader濾鏡

文法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性：

enabled : 可選項。布爾值(Boolean)。設定或檢索濾鏡是否激活。true | false

　　　　　　true : 預設值。濾鏡激活。

　　　　　　false : 濾鏡被禁止。

sizingMethod : 可選項。字元串(String)。設定或檢索濾鏡作用的對象的圖檔在對象容器邊界内的顯示方式。 crop : 剪切圖檔以适應對象尺寸。

　　　　　　　　image : 預設值。增大或減小對象的尺寸邊界以适應圖檔的尺寸。

　　　　　　　　scale : 縮放圖檔以适應對象的尺寸邊界。

　　　　　　　　src : 必選項。字元串(String)。使用絕對或相對 url 位址指定背景圖像。假如忽略此參數，濾鏡将不會作用。

說明：

在對象容器邊界内，在對象的背景和内容之間顯示一張圖檔。并提供對此圖檔的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。

PNG(Portable Network Graphics)格式的圖檔的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖檔完全透明區域後面的内容。

了解了以上的内容，可以寫一段簡單的CSS代碼（還不是完全正确的代碼）：

#div1 {

   height: 600px;

   width: 260px;

   padding: 20px;

   background-repeat: repeat;

   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png" )

}

這段簡單的CSS代碼就可以在IE中正常的顯示PNG透明背景，但是會發現在FF下不會出現背景，分析原因：

AlphaImageLoader濾鏡隻能被IE支援，FF是不支援該濾鏡的

有些初次寫的時候很多人會這樣：

在代碼中添加這樣一段： background-image: url(bj1.png);

添加這樣一段代碼雖然能解決FF下的問題，都是IE又出現問題：新的背景會覆寫在濾鏡的背景之上，導緻濾鏡顯示無效，這時候就用到IE和FF對CSS讀取的差別特性了：

Firefox、Opera等完全支援PNG透明圖檔的浏覽器也支援子選擇器（>），而IE不識别（包括IE7），所有我們可以通過這來定義Firefox、Opera等浏覽器中PNG圖檔的樣式。代碼如下：

html>body #div1 {

   background-repeat: repeat;background-image: url(bj1.png);

}

同時，我們通過隻有IE才識别的通配符（*），來定義IE浏覽器中的濾鏡。代碼如下：

* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")

}

而#div1 {}就放一些IE和FF共用的設定來減少代碼檔案的大小。最終就是這樣：

#div1 {

   height: 600px;

   width: 260px;

   padding: 20px;

   background-repeat: repeat;

}

html>body #div1 {

    background:url(../images/menu1.png) no-repeat;

}

* #div1 {

    background:none;

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');

}

需要注意的是：AlphaImageLoader濾鏡會導緻該區域的連結和按鈕無效，解決的辦法是為連結或按鈕添加：position: relative;這樣條代碼，使其相對浮動。AlphaImageLoader無法設定背景的重複，是以對圖檔的切圖精度會有很高的精确度要求。

--------------------------------------------------------------------

如果在網頁中直接插入png圖檔想使其透明隻需加入以下js代碼，整個頁面内的所有直接插入的png圖檔都可以實作透明：

<script language="JavaScript">

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.

{

    var arVersion = navigator.appVersion.split("MSIE")

    var version = parseFloat(arVersion[1])

    if ((version >= 5.5) && (document.body.filters))

    {

       for(var j=0; j<document.images.length; j++)

       {

          var img = document.images[j]

          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='scale');\"></span>"

             img.outerHTML = strNewHTML

             j = j-1

          }

       }

    }   

}

window.attachEvent("onload", correctPNG);

</script>

--------------------------------------------------------------------

如果是想使用png做背景透明的話，需要用到css濾鏡和hack：

html>body .png { background:url(1.png); width:300px; height:100px; border:#000 solid 1px;}

* html .png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');

    background:none; width:300px; height:100px; border:#000 solid 1px;}   來自: http://hi.baidu.com/849653727/blog/item/addc671ca292ab1a304e15ad.html