製作背景透明的PNG＆在IE 6底下顯示

 

最近開始想要來裝飾一下門面，雖然說敝人向來走儉樸路線，不過偶爾穿穿新衣服，順便換個好心情，也是不錯的。

於是開始著手，因為本身對網頁製作幾乎一竅不通，所以首先遇到的難題是──如何顯示圖片。查了一些網路上的教學，大致了解CSS和HTML的關係與使用方法。經過思量後，選擇用設置成背景圖片的方式呈現，因為header這個區塊的原始背景圖的長度固定，所以無法拉長，而背景圖片若超過區塊，邏輯上來講超出的部分應該會被遮蓋住（不過直接貼圖是不是也這樣我就不曉得了，改天再試試），所以便選擇了它。

接下來的問題來了，該放什麼圖，又怎樣放才會比較好看些？直覺告訴我，背景透明的圖片一定比較好，背景透明的圖片有PNG和GIF，PNG可以顯示全彩，GIF只有二五六色，不過PNG在IE 6.0以下版本顯示有些問題，這部分下面會談。但不論是PNG或GIF，都要自己處理背景透明的問題。又上網查了一下，找到PhotoShop讓JPG轉PNG時，背景如何修成透明的方法，詳細如下：

1.啟動PhotoShop，開啟一張JPG圖檔。

2.注意右邊的浮動工具列，圖層裡面有一個背景，雙擊左鍵進入選單。

3.點選確定，這樣背景便轉換為PhotoShop專屬的背景格式。

4.從左邊繪圖工具列中，選擇魔棒工具。

5.當畫筆為魔棒工具時，滑鼠移往圖片，在背景處單擊左鍵，會自動出現該切割的背景邊框虛線，按鍵盤Ctrl + x剪下。

6.背景被移除後，會長這麼模樣。

7.Menu –> 幫助 –> 弄出透明圖像。

8.選我的圖像已經在透明背景上，按下一步。

9.轉換成GIF或PNG，再按下一步即可儲存。

10.選擇檔名和儲存位置，製作完成！

 

好，圖片的部分已經弄得差不多了，接下來的問題比較瑣碎，因為前面說過，PNG圖檔在IE 6.0以下版本中透明色的顯示會有些問題。我又拜見了GOOGLE大神，似乎有如下三個可行方案：

1. png -> gif

2. png24 -> png8

3. 套用外部js檔

第一種方法，應該是最直接的，雖然畫質降低，顏色範圍緊縮，但至少可以保證在各種瀏覽器底下看起來都一樣，這是沒有辦法中的辦法。

第二種方法，png8雖然也只有256色，但基本與png24看起來差不多；只是問題在於雖然在IE底下可行，但半透明會變全透明，所以有的圖顯示起來會怪怪的，不是很美觀。

這是其他瀏覽器的顯示

這是IE 6.0底下的顯示

是不是差很多？不過或許並不是所有圖片都這樣。如要使用這個方案，因為我一時間找不到PhotoShop要怎麼轉png8，所以用了兩個非視窗軟體pngnq和pngout，需搭配指令：

使用pngnq先把PNG檔轉成256色，指令如下：

pngnq -n 256 image.png

再用pngout轉成png8的格式，指令如下：

pngout -c3 -d8 2.png pngout.png

第三種方法，目前似乎還沒有完整的解決之道，主要是背景的部分支援很差，不是不能重覆，就是不能更改位置，這部分可能跟瀏覽器的核心有關，所以改來改去總是改不完整，不建議用這個方法（研究了兩個小時後的結論）。

恩，大致就這樣，美化的第一步，雖然不算很穩健，但至少看得到改變，改造第一課──成功！