[技研]神阿~讓IE6正常顯示PNG圖檔的透明背景吧
長久以來網頁設計最讓人頭痛的就是無法使用具有透明背景的圖檔，或許很多人不認同，畢竟Gif不就是個具有透明背景的圖檔嗎? 然而大家也都清楚到不行的是Gif的透明背景實在是差到不行的效果，而在PNG這個格式出來之後，彷彿網頁設計出現了一盞明燈，但可惜的是全球最多使用者的瀏覽器-Internet Explorer 6.0 版之前對PNG圖檔的支援真是差的可以，也就造成了網頁設計一直以來讓人不得不勉強使用那醜陋的Gif透明背景效果。而為了解決這個讓人頭痛的問題，以下 使用微軟IE專用的濾鏡或許是目前較為可行的做法。
一般正常的作法通常是為各個瀏覽器添加不同設定的CSS，在這邊我就先針對IE6、IE7、FF來做CSS的設定，設定如下
==============================================================
/*IE 6---以下寫法所有瀏覽器都看的懂*/
.sample {
background: url(../images/PNGsample.png) no-repeat top left;
}
/*FF---以下寫法只有FF及IE 7看的懂，其他瀏覽器看不懂*/
html>body .sample {
background: url(../images/PNGsample.png) no-repeat top left;
}
/*IE 7---以下寫法只有IE 7看的懂，其他瀏覽器看不懂*/
*+html>body .sample {
background: url(../images/PNGsample.png) no-repeat top left;
}
==============================================================
如同上面的寫法，那麼圖片在三個瀏覽器的顯示則會各為下列畫面(背景為天空，PNG檔則是太陽)
很明顯的PNG圖檔(太陽)在IE6下面會在圖片透明區域產生醜陋的背景色，那麼這時我們在為IE6加上MS專有的濾鏡語法到CSS中，完整的Code如下：
============================================================
/*IE 6---以下寫法所有瀏覽器都看的懂*/
.sample {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/PNGsample.png', sizingMethod='image');
}
/*FF---以下寫法只有FF及IE 7看的懂，其他瀏覽器看不懂*/
html>body .sample {
background: url(../images/PNGsample.png) no-repeat top left;
}
/*IE 7---以下寫法只有IE 7看的懂，其他瀏覽器看不懂*/
*+html>body .sample {
background: url(../images/PNGsample.png) no-repeat top left;
}
============================================================
接著很神奇的，就可以看到IE6那醜醜的PNG背景色消失了，如圖：
相信眼尖的你應該有發現，我在CSS中寫的 Code 把IE6的背景設定拿掉了，且圖片路徑也跟原本背景圖片的路徑不一樣，那就來看看這一整條的CSS的意思吧~
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sample.png', sizingMethod='scale',enabled=FALSE);
sizingMethod有crop,image,scale三種。預設是image，也就是PNG圖片照原本尺寸顯示。如果使用scale的話，圖片則會依照div容器的尺寸縮放；如果用crop且圖片尺寸比DIV還大的話，圖片超出DIV的部分則會被切掉。enabled則為效果的開關，如果值是false或1，就等於整個濾鏡效果都停用。
除此之外，AlphaImageLoader的用法在HTML及CSS中的路徑寫法是要注意的，倘若HTML檔案跟CSS是在不同階層的資料夾中，而我們的AlphaImageLoader要寫在獨立的CSS檔裡面的話，則路徑則要依照HTML及圖片的相對路徑來撰寫，而不是由CSS檔案與圖片的相對路徑來寫；也就是說，不管如何，使用AlphaImageLoader的做法，無論是寫在CSS還是HTML中，其圖片路徑一律皆採用HMTL檔案位置與圖片的相對路徑來寫，否則則會找不到圖片，也就是沒作用啦~XD
有興趣的人現在就快去試試吧^^
範例檔下載(34KB)
留言
恭喜你囉^^