PNG8格式圖片是不支持半透明等問題深入分析

2024-07-11 08:48:45

字體：大中小

來源：轉載

供稿：網友

最近搜索了一下有關PNG8格式圖片的詳細解析。發現信息比較零散，也存在有某些爭議（當然了，不排除本人搜索功力差的因素）。有說PNG8格式圖片是不支持半透明的，也有持反對意見的。所有才有了寫這篇文章的想法。有什么說得不對的，也歡迎大家批評指正。廢話就說到這里，直接進入正題吧。

首先我們來理解一下什么叫Alpha透明和索引色透明。
Alpha透明：Alpha的數值范圍為從0(黑色)到255(白色)，黑色代表透明，白色代表不透明。如果你的圖片的白色部分是附著在某種顏色之上，那么即使背景是白色的，使用Alpha透明后，你圖片上的白色部分仍然是不透明的。
索引色透明：索引色是畫布的顏色即背景色，如果圖片上存在與你設定的背景色相同的顏色的話，那么在索引色透明模式下，該圖片上所有顏色里與背景色相同的部分以及背景色都將建成全透明。

PNG格式特點：
一、類型
PNG這種圖片格式包括了許多子類，但是在實踐中大致可以分為256色的PNG（PNG8）和全色的PNG(PNG24、PNG32)，你完全可以用256色的png代替gif，用全色的PNG代替jpeg。
二、透明性
PNG是完全支持alpha透明的（透明，半透明，不透明），盡管在IE6下會產生兩個怪異現象（下面會做解釋）。
三、動畫
PNG不支持動畫

其實只要不涉及到半透明，PNG8和PNG24格式的圖片并沒有多大的區別，但是一旦考慮到半透明的時候，就會顯示出本質上的區別。
PNG8是一種在制作工序和理念上完全不支持半透明的圖片，色差相對于PNG24要少很多，色值也只局限于1—256種顏色。所以當用到半透明的圖片來表現效果的時候，PNG8就去失去了它本身的優越性。
PNG24是一種制作工序和理念上支持半透明的圖片，色差相對于PNG8要優越很多，在色值數量上也沒有局限性，可以是幾萬種色值。它本身的優越性就在于可以讓你肆無忌憚的做你想做的想要的半透明圖片，而且在存儲上沒有半點的條件要求和限制。
但是如果想做出半透明的PNG8格式的圖片還是可能的。方法就是先制作出半透明的PNG24圖片，然后再用fireworks存儲為PNG8格式的圖片。

PNG8的在IE6中的怪異表現：
①半透明的PNG在IE6下的瀏覽器顯示為全透明，并且不會呈現索引色透明那么自然的過渡，會出現毛邊現象；
②Alpha透明的全色PNG（PNG24）在IE中會出現灰色背景。

由上面可以總結：
a.全透明的PNG8可以在任一瀏覽器正常顯示（就像gif一樣）。半透明的PNG8在除了IE6下的瀏覽器下錯誤的顯示成全透明，其它瀏覽器都能正常顯示半透明。
b.第二個bug可以用js解決（詳情請見讓IE6支持圖片半透明！）。

PNG8格式圖片的導出問題：
①PS只能導出索引模式的PNG8格式的圖片（原因是PS里認知和識別的PNG8沒有利用黑白灰三種明度顏色通過alpha通道來表現半透明的機能，所以在PS里打開PNG8半透明圖片的時候只是默認用相近的色相來替換半透明色相）；
②fireworks可以導出索引模式和Alpha模式的PNG8格式的圖片；
③Alpha透明導出的圖片比索引色透明導出的PNG8還要小。

上一篇：表單元素radio select對齊與IE6下雙邊距問題解決方案

下一篇：css 半透明讓IE6支持png圖片半透明解決方法