最近發現在IE6下不能正常顯示PNG圖片,這讓我很苦惱。使用PNG圖片的透明或半透明的特性能做出非常漂亮的網頁來,在Firefox和Opera中對PNG的支持都非常的好,但是IE卻無視PNG圖片這一特性的 “存在”,雖然IE7已經支持可IE6還是不行。查了一些資料,基本解決了這一問題,這裏跟大家分享。
雖然有讓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代碼來實現:
.news{width:364px;height:212px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/templets/images/news_bg.png");background:none; }
這段簡單的CSS代碼就可以在IE中正常的顯示PNG透明背景,但是會發現在FF下不會出現背景,分析原因:AlphaImageLoader濾鏡只能被IE支持,FF是不支持該濾鏡的。
有些初學者可能會在代碼中添加這樣一段:background-image: url(/templets/images/news_bg.png);
添加這樣一段代碼雖然能解決FF下的問題,都是IE又出現問題:新的背景會覆蓋在濾鏡的背景之上,導致濾鏡顯示無效,這時候就用到IE和FF對CSS讀取的區別特性了:
我們可以分開IE6跟IE7、FF,因爲IE6能識別樣式前“_”號,而IE7、FF卻不行,所以我們先寫IE7和FF能識別的CSS:
.news1{width:364px;height:212px;background:url(/templets/images/news_bg.png) top no-repeat;}
而後在代碼後加上AlphaImageLoader濾鏡代碼,並使用“_”號前綴,所以最終完整的代碼是這樣的:
.news1{clear:both;float:left;width:364px;height:212px;margin-bottom:16px;background:url(/templets/images/news_bg.png) top no-repeat;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/templets/images/news_bg.png");_background:none;}
這樣效果可以實現,也不增加多少代碼量。
不過需要注意的是:AlphaImageLoader濾鏡會導致該區域的鏈接和按鈕無效,解決的辦法是爲鏈接或按鈕使用相對定位,或者添加:position: relative;這樣條代碼,使其相對浮動。
最後AlphaImageLoader無法設置背景的重複,所以對圖片的切圖精度會有很高的精確度要求。