完美的 IE6 png透明圖檔解決方案

摘要:png的透明圖檔效果不是gif可以比擬的，不過白痴IE6（以下）並不支援其透明圖層，因此，我們得花需多心思去處理這些相容性問題。如今，總算找出一套完整的解決方案了...讓您的IE6也看得懂美美的png透明圖！
標題

一、下載並解壓檔案
二、網頁中的png圖檔
三、CSS中的png圖檔

這個解決方案是融合了以下兩個網站提供的解決方法（剛好一人一部份）
http://homepage.ntlworld.com/bobosola/pnghowto.htm
http://www.twinhelix.com/css/iepngfix/
一、下載並解壓檔案

我已將之去蕪存菁，所以，首先，請先下載以下壓縮檔：
http://ck2tw.net/modules/tad_uploader ... amp;cfsn=19&cat_sn=12

解壓後有三個檔，直接丟到您的網站或者佈景的目錄下。
二、網頁中的png圖檔

png 圖檔有可能用在兩種地方，首先是網頁（xxx.html）內，指的就是直接用 這種地方，在IE6下看起來像這樣：

於是我們打開網頁檔，在下方加入以下這三行，「pngfix.js」的位置請自行依據實際位置自行調整（範例的 xxx.html 和 pngfix.js 是放在同一層）：



看起來像這樣：

存檔再用IE6重新整理一下畫面，就會有漂亮的圖檔出現了！

三、CSS中的png圖檔

另外一種情形是在CSS中使用png透明圖，例如下例就是在IE6下看起來的模樣：

這是利用CSS來製作內容底圖，也就是下面的 head.png 這個透明圖檔。

我們只要利用這一個屬性

behavior: url(iepngfix.htc);

搭配 iepngfix.htc 以及 blank.gif 就可以讓 CSS 中的png透明圖在 IE6 下產生透明效果，CSS語法改完後像這樣（一樣要注意 iepngfix.htc 以及 blank.gif 的路徑，範例是將該檔和 CSS 檔放在同一層）：

CSS中，只要有用到 png 的地方，都要加入那一行，如此存檔後，就可以看見美美的效果囉！



- 已使用 Google 工具列寄出"