讓PNG圖片在IE6.0下也能背景透明

應用PNG圖片的透明或半透明的特效能做出非常漂亮的網頁來。Firefox和Opera對PNG的支援非常的好，都是IE卻無視PNG圖片這一特性的 “存在”，雖然IE7已經支援都是IE6還是不行。查了一些資料，基本解決了這一問題，準備應用到PJskin上。
雖然有讓IE6支援PNG透明背景的JS程式，都是不是很方便，還是用CSS來實現的好。使用到的就是：

    文法：

    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-repeat: repeat;background-image: url(bj1.png); } * #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”bj1.png”) }

    需
要注意的是：AlphaImageLoader濾鏡會導致該地區的連結和按鈕無效，解決的辦法是為連結或按鈕添加：position:
relative;這樣條代碼，使其相對浮動。AlphaImageLoader無法設定背景的重複，所以對圖片的切圖精度會有很高的精確度要求。
或：
在css中我還不讓背景透明 只能讓圖片的alpha改變

    我教你一個別的方法也可以 不知道你看下怎麼樣

    1、把圖片匯入到flash中然後 把圖片背景去掉
    2、現在只能看到圖片和flash背景
    3、把flash放在網頁中 選中flash 加入代碼
<param name=wmode value=transparent>
    就可以了