PNG透明背景圖片在 各種浏覽器 上的應用及問題

PNG 圖片在網站設計中是不可或缺的部分，最大的特點應該在於 PNG 可以無損壓縮，而且還可以設置透明，對於增強網站的圖片色彩效果有重要的作用。
但為什麼 PNG 圖片卻沒有 GIF 和 JPG 圖片的使用來得廣泛呢，這個禍因應歸屬於微軟的 IE 浏覽器（Firefox 和 Opera 對 PNG 支持的比較好，而現在浏覽器的主流IE6 卻無法很好的支持）。不過微軟在最近也開始改過自新了，新出的的 IE7 可以很好的支持 PNG，可以想象在未來的網絡世界，PNG 圖片的重要性將會更加凸顯。
但在大家還在絕大多數的使用 IE6 的時候，我們又怎樣在 IE6 的世界去完美使用 PNG 圖片呢（PNG 圖片的時候最重要的地方在於 PNG 透明背景圖片的運用）。我們應該慶幸我們是幸福的！IE5.5+ 的 AlphaImageLoader 濾鏡為通向 png 提供了一個道路，如果他載入的是 PNG(Portable Network Graphics) 格式，則 0%-100% 的透明度也被提供。但 IE5.0 無法支持屬性，那只有完全絕望了，不過絕望的只是幾個，得到是絕大數，我們應該知足，知足才會常樂。
現在我們將通過 Hack 和 AlphaImageLoader 濾鏡來實現 IE6 下的 PNG 透明背景圖片，不過由於 filter 的使用存在一定的性能問題，所以盡量少用。
先熟悉下濾鏡的語法：
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 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
Firefox、Opera、IE7 等完全支持 PNG 透明圖片的浏覽器，而 IE6 不能很好識別，所有我們可以通過這來定義Firefox、Opera、IE7 等浏覽器中 PNG 圖片的樣式。如下
#png {background: url(絕對路徑/images/bg.png) repeat;}而對於 IE6，我們都通過濾鏡的方法來定義。我們通過只有 IE6 才識別的下劃線（_），來定義 IE6 浏覽器中的濾鏡。如下：
#png {
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizinMethod='scale', src="絕對路徑/images/bg.png");
_background:none;
}這樣綜合起來的最後方法就是：
#png {
background: url(絕對路徑/images/bg.png) repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="絕對路徑/images/bg.png");
_background:none;
}不過需要注意的一個地方：
使用 AlphaImageLoader 後該區域的超鏈接和按鈕會失效，解決的方法：對鏈接或按鈕直接設置相對位置，讓它們浮動於濾鏡區域的上面。