2008年6月17日 星期二

[技研]神阿~讓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檔則是太陽)

在IE6下PNG圖片顯示的狀況 在IE7及Firefox下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背景色消失了,如圖:

IE6套用濾鏡後
在IE7及Firefox下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)

4 則留言:

misiia 提到...

好神啊)))))

小育 提到...

終於可以ie6、ie7、ff同時正常顯示png圖片了^^

壞掉的印表機 提到...

To 小育
恭喜你囉^^

eRic 提到...

在網路上看到使用這個屬性有時候會有一個問題,就是在IE連結無法點選,這時候要在連結的標籤上加上position: relative;就會正常