前陣子試了這支 js ，比我之前用的 pngfix.js 好用很多，在這裡做一下筆記，也順便分享一下。
PNG 透明圖相較於 GIF 來說美觀許多，因為他支援半透明，如上圖，同樣一張圖存成 GIF 和 PNG-24 放在同一個花色背景的 DIV 裡，顯示出來就不一樣。PNG-24 格式的圖檔，邊緣並不會產生鋸齒狀，並且清楚的看得出半透明效果。
但是 IE6 瀏覽器並不支援 PNG 透明，如果直接放的話，透明的部分會變成一塊灰色。若想做出符合各種瀏覽器的網頁，又要使用 PNG-24 格式使網頁更美觀，IE6 就變得非常討人厭。
網路上找的到很多種方法讓 IE6 也支援 PNG 透明圖，試過之後覺得「DD_belatedPNG」是最好用的：
PNG 透明圖相較於 GIF 來說美觀許多，因為他支援半透明，如上圖，同樣一張圖存成 GIF 和 PNG-24 放在同一個花色背景的 DIV 裡，顯示出來就不一樣。PNG-24 格式的圖檔，邊緣並不會產生鋸齒狀，並且清楚的看得出半透明效果。
但是 IE6 瀏覽器並不支援 PNG 透明，如果直接放的話，透明的部分會變成一塊灰色。若想做出符合各種瀏覽器的網頁，又要使用 PNG-24 格式使網頁更美觀，IE6 就變得非常討人厭。
網路上找的到很多種方法讓 IE6 也支援 PNG 透明圖，試過之後覺得「DD_belatedPNG」是最好用的：
1
首先到這裡下載 js 檔，網站上有兩個檔案，只要選擇一個下載就可以了。2
將 js 檔放到網頁跟目錄下或上傳到自己的空間。3
在網頁的 </head> 上面加上<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('*');
/* PNG IE6 */
</script>
<![endif]-->
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('*');
/* PNG IE6 */
</script>
<![endif]-->
將紅色部分改成你自己的 js 檔路徑，完成。
4
根據官方的說明
這支 js 是支援 background-image 的 png 透明的
只是需要注意的是
目前這個版本還無法處理 background-position: fixed;
還有 <tr> 和 <td> 也發揮得不太好
其他無法處理的還有 <input type="image"/>
但我想這點可以用 background-image 來替代就可以囉！
10 Comments:
Subscribe to:
Post Comments (Atom)
March 6, 2009 9:28 AM
ie不支援png透明的問題也曾經困擾我很久,那時四處上網找解決之道,但下載的js黨總是有問題,不能全面適用所有等級的ie,謝謝你的提供,使用說明也整理得很好.3Q!!!
March 13, 2009 12:33 PM
您照您提供的方式製作(我用ie6)
不過都沒法呈現透明png背景效果也
我的png也是PNG-24
相對路徑都放再同一層級
但是都沒法如你說的可以完成
是不是我的png圖還需要做設定
或是有其他要注意得地方呢
可以交交我嗎
謝謝囉
March 14, 2009 1:19 AM
不客氣！
無名氏：
你這樣問我也不太清楚為什麼，
如果可以提供網址我可以幫你看看！
March 24, 2009 10:00 AM
私心希望IE6從世界上消失
IE8還蠻好用的，MS快強迫大家更新阿，
這樣以後工作就不用檢查IE6了
March 24, 2009 3:42 PM
你說的沒錯!!!!
ie6 快死吧~
June 14, 2009 11:28 PM
有可能是因為用在CSS裡所以無法顯示?!
我記得之前有一個js只能修改html
CSS要另外定義
June 14, 2009 11:35 PM
November 6, 2009 3:32 PM
剛剛差點翻桌大罵「天殺的ie6」時，就google到這篇網誌，感謝你的分享
原本我是用iepngfix.htc，只用在html tag "img"的話還適用，但background就不行了，就像這位http://blog.roodo.com/waking_life/archives/3038653.html一樣想翻桌，而你分享的這個方法~支援的範圍更廣，感謝^^
November 8, 2009 11:19 PM
May 20, 2011 10:32 AM
感謝分享~~~
很有幫助喔
自己竟然沒早點看到這篇