應(yīng)用PNG圖片的透明或半透明的特性能做出非常漂亮的網(wǎng)頁來。Firefox和Opera對PNG的支持非常的好，都是IE卻無視PNG圖片這一特性的“存在”，雖然IE7已經(jīng)支持都是IE6還是不行。查了一些資料，基本解決了這一問題，準備應(yīng)用到PJskin上。
雖然有讓IE6支持PNG透明背景的JS程序，都是不是很方便，還是用CSS來實現(xiàn)的好。使用到的就是：
IE5.5+的AlphaImageLoader濾鏡
語法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="http://blog.teamdo.com.cn/sURL" )
屬性：
enabled : 可選項。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。
sizingMethod : 可選項。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。 crop : 剪切圖片以適應(yīng)對象尺寸。
image : 默認值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。
scale : 縮放圖片以適應(yīng)對象的尺寸邊界。
src : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會作用。
說明：
在對象容器邊界內(nèi)，在對象的背景和內(nèi)容之間顯示一張圖片。并提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區(qū)域后面的內(nèi)容。
了解了以上的內(nèi)容，可以寫一段簡單的CSS代碼（還不是完全正確的代碼）：
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://blog.teamdo.com.cn/bj1.png"
}
這段簡單的CSS代碼就可以在IE中正常的顯示PNG透明背景，但是會發(fā)現(xiàn)在FF下不會出現(xiàn)背景，分析原因：
AlphaImageLoader濾鏡只能被IE支持，F(xiàn)F是不支持該濾鏡的
有些初次寫的時候很多人會這樣：
在代碼中添加這樣一段： background-image: url(http://blog.teamdo.com.cn/bj1.png);
添加這樣一段代碼雖然能解決FF下的問題，都是IE又出現(xiàn)問題：新的背景會覆蓋在濾鏡的背景之上，導(dǎo)致濾鏡顯示無效，這時候就用到IE和FF對CSS讀取的區(qū)別特性了：
Firefox、Opera等完全支持PNG透明圖片的瀏覽器也支持子選擇器（>），而IE不識別（包括IE7），所有我們可以通過這來定義Firefox、Opera等瀏覽器中PNG圖片的樣式。代碼如下：
html>body #div1 {
background-repeat: repeat;background-image: url(http://blog.teamdo.com.cn/bj1.png);
}
同時，我們通過只有IE才識別的通配符（*），來定義IE瀏覽器中的濾鏡。代碼如下：
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://blog.teamdo.com.cn/bj1.png")
}
而#div1 {}就放一些IE和FF共用的設(shè)置來減少代碼文件的大小。最終就是這樣：
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
html>body #div1 {
background-repeat: repeat;background-image: url(http://blog.teamdo.com.cn/bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://blog.teamdo.com.cn/bj1.png")
}
需要注意的是：AlphaImageLoader濾鏡會導(dǎo)致該區(qū)域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加：position: relative;這樣條代碼，使其相對浮動。AlphaImageLoader無法設(shè)置背景的重復(fù)，所以對圖片的切圖精度會有很高的精確度要求。
