文章發佈於Sevendesign,如需轉貼請保留本訊息,並註明原文連結
原文連結:http://sevendesign1230.pixnet.net/blog/post/2258896

PNG圖片格式與同是網路上流通的影像格式JPEG及GIF相較,PNG有著壓縮影像不失真的特性,可讓圖像在任何背景上,看不到接縫,測底改善了GIF格式像素色彩只能有透明或不透明兩種選擇(我們在做網頁的時候,往往需要用到有透明度背景的圖片,GIF格式是我們經常用到的,但問題是放在網頁上卻會發現圖片邊緣有著鋸齒狀,達不到半透明化的效果,而PNG格式卻能完美的解決這個問題)。

此外,PNG格式跨平台的影像亮度控制,可讓影像在不同的作業系統(Windows, Mac, linux)上顯示出相同的效果,不像GIF檔在不同的作業系統上顯示出的畫面會跟著不一樣,所以PNG格式格外適合在網路環境流通。

雖然PNG格式幾乎支援了 GIF 與 JPEG格式的所有功能,但卻仍存有缺點:

一、無法儲存多張影像資訊,所以不能像GIF一樣作為動畫檔的儲存格式,另外,因為PNG使用的是非破壞性的壓縮,所以PNG檔通常比JPEG檔大,頁面如果使用太多的話將導致網頁Loading太慢。

二、PNG格式面臨的最大問題是,目前的瀏覽器雖然基本上都支援此格式,但卻不一定支援它所有的功能,例如IE6.0版本以下(含IE6),就無法顯示出PNG檔背景透明的效果,但根據網路調查公司StatCounter最新的瀏覽器市占率調查結果,IE6.0在臺市占率仍超過5成以上。

※之前一直在想.png格式為何不能正常顯示於ie瀏覽器,不能Repert,偶然間在國外網站看到這篇能解決png透明圖的相關文章,雖然已經有大多數人看過了吧,但在此還是做了簡單的教學文章,希望能幫助到更多的人,畢竟IE使用者還是占了大多數。
http://www.twinhelix.com/css/iepngfix/demo/

 

首先我們可以先去http://www.twinhelix.com/css/iepngfix/這個網站下載iepngfix.zip

PNG 解壓縮後的檔案
PNG

 

一、複製iepngfix.htc和blank.gif到您的資料夾中;我是將iepngfix.htc複製到Css資料夾,blank.gif複製到pic資料夾。

二、擇一複製以下Code至您的Css檔或是Html

Css Code

img, div { behavior: url(css/iepngfix.htc); }

Html Code

<style type="text/css">
  img, div { behavior: url(css/iepngfix.htc); }
</style>

三、請用記事本編輯iepngfix.htc並尋找以下Code " IEPNGFix.blankImg = thisFolder + 'blank.gif' ";填入blank.gif的正確路徑取代之,例如:

blank.gif正確路徑

IEPNGFix.blankImg = 'pic/blank.gif';

四、最後,如果您希望瀏覽器能達到背景水平重複或是垂直重複請先複製iepngfix_tilebg.jp到您的資料夾,並在HTML加入以下語法;我是將iepngfix_tilebg複製到js資料夾。

Html Code

<head>/*head之後*/
  <script language="JavaScript" type="text/javascript" src="js/iepngfix_tilebg.js"></script>
</head>

Seven 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 好東西...
  • 好東西...
  • 要跟好朋友分享!

    Seven 於 2009/12/12 16:24 回覆