有的時候排網頁時，會遇到需要背景透明化的圖片以達成設計的要求。這部分其實gif便已經擁有圖片透明的功能，但礙於它支援的色彩過少，導致圖片處理能力不佳，譬如圖片陰影、柔邊、邊緣銳利化等等。最後png-24出來後 才逐漸符合各設計的排版要求。
但偏偏IE6不支援PNG，而原廠也已經停止更新IE6了，無奈之餘只能自力救濟找方法來解決OTZ。以下方法是我研究很久後所找出的解決之道。除了能有效處理png圖片與背景外，同時也是我從各方法中找出最能降低網頁處理速度的辦法。提供各位參考。
iepngfix
相信網頁設計師在處理IE6的PNG透明時，也知道有這套程式，但網路上的教學說法眾多紛紜，導致頻頻碰壁而放棄這套程式。這裡就提供我的流程出來,以及我自己使用心得的延伸教學。二、下載完後會是個壓縮檔，將壓縮檔裡面的blank.gif與iepngfix.htc抓到自己的資料夾就好，其他不用理會。
三、接下來就是該把程式套到自己的網頁嘍，首先一般的網頁路徑會如下。
這個就是一般做靜態頁面的資料夾與檔案名稱。Js是集中放javascript的，images是放圖片，css便是放 css。所以上述圖片便可以算是我的根目錄 (如果不了解什麼是根目錄的再留言給我，我會再進行解說，因為這將會是此文的重點)。
首先，我們先把blank.gif與iepngfix.htc放到js資料夾後，用記事本將iepngfix.htc給打開，將第１９行的語法進行修改。
原語法
IEPNGFix.blankImg = thisFolder + 'blank.gif';
改成
IEPNGFix.blankImg = 'js/blank.gif';
這裡便是將blank.gif改到你資料夾的圖片路徑，如果你沒改的話，那圖片雖然會呈現透明，但仍會出現一個XX出現。所以務必要將你的改到你放置的資料夾路徑哦。如下圖↓
四、接下來我們在html放一張png圖片後就可以開始寫css，像因為我的程式是放在js資料夾，所以我的路徑必須寫成↓
img { behavior: url("js/iepngfix.htc") }這樣你的所有png圖片便可以都透明化了。 如果你的png是用background(背景圖案)來呈現的話，就在該class裡面放入上串語法即可。
五、如果一～四點你做完後，圖片仍然沒有作用的話，這裡提供兩個偵錯方式給各位。
- 如果完全沒作用的話，表示你css的指向路徑寫錯，或你的blank.gif與iepngfix.htc沒有放在妳寫的css路徑上。切記要重根目錄開始寫。
- 如果有出現效用，但出現X破圖的話，表示你第三點沒做好，有可能是你修改iepngfix裡面的blank.gif的路徑寫錯了，不然就是你放錯資料夾。
延伸心得閱讀
一、如果你只有幾張圖片需要用到png透明的話,那妳可以只要下個class後，將語法寫進去，然後再到Html的img圖片裡添入此class就好。圖片太多張的話loading也會很慢，供大家參考。
例：在css裡面寫
.iepngfix{ behavior: url("js/iepngfix.htc")}
然後到html的圖片元素內寫↓
二、使用css hack 讓ie6只讀這語法，不拖到ie7以上的瀏覽速度。只要將語法的前面加上下底線"_"，這串語法便只有ie6可以讀到而已。
.iepngfix{ _behavior: url("js/iepngfix.htc")}三、可以集中寫在一起，維護上會比較簡單。只要在每個語法間加個逗號便可以共用。
.iepngfix,.header,img{ behavior: url("js/iepngfix.htc")}
總結
最後提供範例文件給有需要的人下載，如果有朋友遇到相同瓶頸的話也歡迎轉載文章:)
沒有留言:
張貼留言