為 PNG 加上背景,意味著使用 source-over alpha 合成,將檔案中每個透明像素與選定的純色進行合成,然後在與來源完全相同的寬度和高度寫入一個完全不透明的 PNG。透明像素並非單純被覆蓋——每個來源色彩會依其自身的 alpha 加權,新背景則以 1 減去該 alpha 加權,兩者的貢獻相加後,通道會四捨五入回一般的 8 位元值,而輸出的 alpha 會設定為 255。這就是 W3C Compositing and Blending Level 1 規範所記載的標準公式,也是瀏覽器 canvas 所實作的內容。實際效果是:經過反鋸齒處理的文字、柔和陰影、毛髮邊緣以及羽化剪裁區域,會融入新背景,而不會殘留當初匯出時所在背景顏色產生的光暈;同時,完全不透明的來源像素會與原始檔案位元完全一致。正確的實作同樣不會更動 canvas 的幾何資訊:相同的寬度、相同的高度、不裁切、不縮放,也不會為了壓縮到某個目標檔案大小而重新編碼。這樣的組合——正確的 alpha 計算加上保留的尺寸——正是讓填上背景的 PNG,能在任何無法渲染透明度的目的地中像一般不透明影像一樣正常顯示的關鍵。
為何透明的 PNG 最終需要純色背景
透明度是 PNG 格式最實用的特性之一。商品剪圖、Logo 匯出、簽名掃描以及圖示精靈圖,通常都會以帶有 alpha 通道的 PNG 形式提供,如此便能放置於任何背景之上。然而一旦目的地無法渲染 alpha,這項特性就會變成問題。將透明度攤平為白色的電子郵件客戶端、需要明確背景的市集上架頁面、列印文件、深色模式使用者介面,以及許多 CMS 的上傳欄位,全都預期接收的是不透明影像。將透明 PNG 疊在 CSS 背景、投影片背景或 Word 頁面上,也並非總是可行,因為檔案本身是作為附件或靜態資源分享的。在 PNG 內部加入背景,是最乾淨的解法:原本是透明的那個檔案,會變成一張在任何地方都能一致顯示的一般不透明影像。
最常見的實際情況包括:由設計師製作、以透明 PNG 形式匯出的 Logo,需要在白色賣家頁面上以靜態資源形式提供;從攝影棚背景中取出、透過手動或自動遮罩工具處理過的商品剪圖,如今需要放置在品牌色之上;在白紙上掃描、卻產生細微灰色光暈像素的簽名或印章;以及帶有圓角和柔和陰影、需要用於深色儀表板的圖示精靈圖。在這些情況下,目標都相同——以一個明確的顏色填滿空白區域,讓目的地能像處理一般影像一樣對待它。
Alpha 合成如何處理柔邊
替換透明像素,並不等同於在影像後方塗上一個矩形。PNG 的透明度是以每個像素為單位,而介於完全透明(alpha 0)與完全不透明(alpha 255)之間的值,承載著真實的色彩資訊。經過反鋸齒處理的文字、柔和陰影、毛髮邊緣、圓角圖示角落,以及羽化剪裁區域,全都存在於這個中間範圍。只填補 alpha 為 0 像素的粗糙工具,會把這些半透明邊緣留在原本背景之上,這也解釋了為何在「棋盤格預覽」中,影像一移動就常會出現光暈和色彩邊緣。
正確的做法,是針對新顏色採用標準的 source-over 合成。針對每個來源像素,其紅、綠、藍通道乘上來源的 alpha,新背景的通道乘上 1 減去來源 alpha,兩者的貢獻相加,通道再四捨五入回一般的 8 位元值。接著將輸出 alpha 設定為完全不透明。這就是 W3C Compositing and Blending Level 1 規範所記載的公式,在 simple alpha compositing 規則中有所引用,並依 MDN 教學所描述的方式,由瀏覽器 canvas 實作於 canvas compositing。一個半透明的紅色像素疊在藍色之上,會變成紫色混合,而非純紅或純藍。完全不透明的來源像素則保持不變。完全透明的像素會恰好變成所選的顏色。
為 PNG 加上背景 工具正是採用此合成規則。每個 PNG 會被解碼一次,放入 RGBA 像素緩衝區,所有像素都會與所選背景進行合成,結果再以原始寬度和高度重新編碼為新的 PNG。計算結果會與外部參考值進行比對,涵蓋零 alpha、全 alpha、緊鄰二分之一的上下值、代表性的通道混合,以及最低的非零 alpha 步階。
| 來源像素狀態 | 行為 | 輸出 alpha |
|---|---|---|
| 完全透明(alpha = 0) | 恰好變成所選的背景顏色 | 255(不透明) |
| 完全不透明(alpha = 255) | 維持來源顏色不變 | 255(不透明) |
| 半透明的邊緣像素 | 來源顏色與背景顏色依 alpha 透過 source-over 合成進行混合 | 255(不透明) |
| 無效位元組或非 PNG 檔案 | 在執行任何合成之前,會產生明確的解碼錯誤 | 不適用 |
為 PNG 加上背景:逐步說明
- 在目前的瀏覽器中開啟「為 PNG 加上背景」頁面。不需要帳號、安裝,也不需要任何上傳服務。
- 選擇透明或部分透明的 PNG 檔案。該工具僅接受 PNG,並支援解碼前最大 25 MiB 的檔案。解碼後的像素緩衝區上限為 16 megapixels,且任一邊長上限為 12,000 像素。
- 挑選與目的地相符的純色背景。瀏覽器的色彩控制項接受六位數十六進位值,處理前的邏輯會驗證該值。常見的選擇包括:純白 #FFFFFF、深色 slate 的 #111827,或是直接從品牌風格指南中取得的精確 HEX 值。
- 選擇「加上背景」。工具會使用 source-over 規則,將每個來源像素與所選顏色進行合成,將輸出 alpha 設為完全不透明,並在頁面上顯示預覽,以及結果的精確輸出尺寸和檔案大小。
- 以一般檢視大小檢視預覽,特別留意柔邊文字的邊緣、陰影光暈,以及毛髮或羽化角落周圍的任何邊緣瑕疵。
- 下載新的 PNG。檔名會加上 "-background",以便與原始的透明來源檔案區分。下載的檔案是不透明的,具有與來源相同的寬度和高度,且從未上傳至任何伺服器。
副檔名為 .png 但內容含有無效位元組的檔案,會以明確的解碼錯誤被拒絕,以避免誤標記的 JPEG 產生令人困惑的結果。嚴格的「僅接受 PNG」輸入限制,也意味著輸出在各種瀏覽器、影像編輯器與作業系統下的表現一致,因為該單一格式的透明度與中繼資料處理方式是一致的。
此工具不會變更的項目
canvas 保留與來源完全一致的寬度和高度。不裁切、不縮放、不銳化、不去雜訊,也不為了達到某個目標檔案大小而重新壓縮。當目的地要求精確尺寸(例如市集上架頁面、印刷版面、CSS 精靈圖或按鈕圖示組),以及任何失真重新壓縮都會明顯降低文字或圖示邊緣品質時,這樣的行為尤其重要。原始檔案也絕不會被修改;結果永遠是與來源並存的一個新 PNG。若後續步驟需要不同尺寸,請先加上背景,再將結果送入 Image Resizer。若目的地需要 JPEG,請將不透明的 PNG 送入 PNG to JPG。將這些操作分開進行,可讓每個轉換都保持可預期,並避免背景變更在不知情的情況下改變幾何或品質。
為實際目的地挑選正確的顏色
棋盤格預覽只是開發時的輔助工具,並非品牌實際呈現的表面。請挑選影像真正會放置的背景顏色。白色對於市集上架頁面和文件掃描是安全的預設值,但部分實際目的地需要特定的值,而憑猜測往往會在最終成品中顯露出來。
- 市集賣家頁面:純白,例如 #FFFFFF,讓素材在上傳後能與頁面外觀一致。
- 深色模式儀表板:與周圍卡片或背景相同的顏色,通常接近 #0F172A 或 #111827,這樣深色圖示不會在頁面上形成明顯的矩形區塊。
- 品牌介面:透過 Image Color Picker 取樣品牌本身的 HEX,或直接從風格指南取得,使結果明顯符合品牌。
- 印刷版面:與文件所用紙張相同的顏色,因為印表機無法重現透明度,會以頁面背景填補空白區域。
- 社群圖文:該通路原生背景或設計過的畫布顏色,讓素材看起來像是自然擺放,而不是被貼上去的。
加上背景之後,請以目的地的顏色,在一般檢視大小下檢視柔邊。技術上正確的合成,並不等於視覺上的認可——請確認新檔案符合目的地所要求的品牌、無障礙或驗收規範。
隱私與處理位置
所有處理都在目前的瀏覽器分頁中進行。PNG 會被解碼至記憶體中的 canvas,與所選顏色合成,並透過瀏覽器自身的下載路徑匯出。預覽使用的是一個暫時的本機 Object URL,當影像變更或分頁關閉時即會釋放。不會向 Lizely 傳送任何影像、顏色選擇或輸出結果。這讓此工具適用於機密草稿、內部品牌素材以及私人的商品影像。然而,它無法取代組織本身的裝置處理政策——一旦檔案存到磁碟,該政策仍規範其儲存與分享方式。
若想進一步了解,請參閱 如何在 JPG、PNG 與 WebP 檔案上使用模糊效果。
若想進一步了解,請參閱 如何為 PNG 檔案加上背景(維持相同尺寸)。