可以把 IE 6 給丟了 - 不支援 PNG 透明背景

試做完第一個版型後，發生了天大的慘事，朋友告訴我，網頁在 IE6 上看起來很恐怖。有多恐怖，自己看到真的都倒退三步。IE6 不支援 PNG 格式的透明背景圖檔，這麼天大的事情，怎麼沒有人來通知我一下…

預期的效果 (Firefox 3.6)：



Internet Exploer 6：



真是很不聽話的鬼東西，PNG 的透明背景到 IE6 都不透明了，變成在沙塵暴裡的爆米花，還是有人把玉米粒丟進火山口，接著就爆了？

網路上有一些 script 可以讓 PNG 在 IE6 裡正常顯示，但試了半天沒效果，應該是我資質駑鈍，只好心一橫把網站所有的圖檔重做成 GIF，最笨但也是最有效的方法…

PNG 的透明背景效果比 GIF 好很多，時代果然在進步。GIF 沒特別處理過，做出來通常還會有一點白白的毛邊，因為通常在做圖片的時候背景是白色的，不像 PNG 用了 SKII 那樣晶瑩剔透、完美無瑕。

沒經過處理的 GIF 圖檔，有白色的毛邊：



GIF 的白邊跟瀏覽器沒關係，總之是扶不起的阿斗，需要特別給他照顧照顧才行。如果以 PhotoImpact 來說：

1. 首先要知道這張 GIF 圖片會放在什麼顏色的背景上。以上面的例子來說，背景顏色是 #FDF1AA。
   
   
2. 用挑選工具選取要儲存的圖案部份，被選取到的物件會有虛線的邊緣。接著按 [F4] 影像最佳化，選擇「選定的物件」，按確定。
   
   
   
   
3. 選取 GIF 的檔案格式，背景灰白相間的格子是代表已經透明的部份。
   
   
   
   
4. 切換到「遮照選項」的頁面，點選「鏤空罩→自訂色彩」
   
   
   
   
5. 在色彩選擇工具的對話框裡，填入背景色彩 #FDF1AA，按確定。
   
   
   
   
6. 可以看到圖片的邊緣已經從原本的白色變成自訂的色彩顏色，最後存檔即可。
   
   
   

將圖片換成 GIF 檔後，再也不怕 IE6 了！！

Internet Exploer 6：