為 PNG 檔案加上背景,意味著將其透明像素替換為所選的純色,讓影像在保持原始度和高度的情況下變為完全不透明。正確的實作方式是將每個來源像素合成在所選顏色之上,因此完全透明的區域會呈現為該顏色,完全不透明的區域保持不變,而任何半透明的邊緣像素則會依其 Alpha 比例將來源顏色與所選背景混合。輸出會是一張與來源像素尺寸完全相同的新不透明 PNG,適合用於市集、列印文件、社群圖片,以及無法正確渲染 Alpha 通道的深色主題介面等目的地。在本機瀏器中處理可保持原始檔案不變,並透過頁面上的預覽顯示最終合成結果,下載的檔案會附加「-background」後綴,使其易於與透明來源檔案區分。這一點在原始素材是標誌、產品去背圖、簽名、圖示或匯出設計(原本以透明方式製作,但現在必須放在需要一般實心背景的地方)時最為重要。
替換 PNG 透明度實際上做了什麼
PNG 檔案可以儲存 Alpha 色階,這表示每個像素都帶有一個從 0(完全透明)到 255(完全不透明)的透明度值。大多數檢視環境都能原生處理這點:網頁覽器、現代設計工具和作業系統的影像預覽會將透明區域顯示為棋盤格,或以視窗後方的任何表面為背景。一旦目的地完全不支援 Alpha,問題就會開始產生。列印驅動程式、某些簡報軟體路徑、市集商品縮圖、較舊的電子郵件用戶端,以及深色模式的 UI 元件,可能會在應該是透明的位置顯示黑色或白色填充,或將影像視為損壞。加上背景正是針對此問題的解法:將每個透明與半透明像素替換為單一所選顏色,然後將每個輸出像素標記為完全不透明。
這項工作與「在編輯器中開啟檔案並以白色背景儲存」並不相同。後者通常會讓半透明邊緣出現可見的殘影,因為編輯器不會透過 Alpha 色階將原始顏色與新背景混合;它只是直接在影像後方塗色。結果會在文字、頭髮、陰影和圓角圖示周圍留下一圈過時色彩的雜訊光暈。正確的背景替換會進行逐像素合成,使邊緣像素真正成為來源與所選顏色的混合,然後輸出一張每個像素都是實心的新影像。
在瀏覽器中為 PNG 加上背景
- 在瀏覽器中開啟 為 PNG 加上背景 工具。
- 點擊檔案選擇器,從您的裝置中選擇一張透明或部分透明的 PNG。在解碼前,可接受最大 25 MiB 的檔案。
- 使用瀏覽器的顏色選擇器,挑選與目的地相符的純色背景。該值必須是六位數的十六進制顏色。
- 點擊「Add background」(加上背景)。該工具會將每個像素合成在所選顏色之上,並在頁面預覽中呈現不透明結果。
- 檢查顯示的輸出尺寸與檔案大小,以確認畫布與來源的寬度和高度完全一致。
- 在一般檢視大小下放大預覽的柔和邊緣,確認反鋸齒後的文字、陰影、頭髮與圓角形狀都能乾淨地融入新顏色。
- 點擊下載按鈕以儲存新的 PNG。下載的檔名會附加「-background」,使其易於與透明來源區分。
來源檔案永遠不會被修改。所有解碼、合成與匯出作業都在目前的分頁中透過記憶體內的畫布完成。一個暫時性的本機 Object URL 負責驅動預覽,當影像變更或頁面關閉時便會釋放,這代表原始 PNG 與所選顏色絕不會被上傳至任何伺服器。
半透明邊緣是如何被混合的
混合規則採用標準的來源覆蓋(source-over)合成,這與 W3C 合成與混合規範 所定義的模型相同,並在 MDN Canvas 合成指南 中有說明。針對每個解碼後的 RGBA 像素,其紅、綠、藍三個色階會乘以來源 Alpha,所選不透明背景的色階則乘以 (1 − 來源 Alpha),接著將兩者的結果相加。最終結果會四捨五入為一般的 8 位元整數色階,然後將輸出 Alpha 設為 255,使每個輸出像素都完全呈現不透明。
想像有一個來源像素以 50% Alpha 儲存為紅色,而所選背景為純藍色。來源 Alpha 以分數表示約為 0.502,因此公式計算如下:
- out_red = 255 × 0.502 + 0 × (1 − 0.502) ≈ 128
- out_green = 0 × 0.502 + 0 × (1 − 0.502) = 0
- out_blue = 0 × 0.502 + 255 × (1 − 0.502) ≈ 127
四捨五入為 8 位元色階後,輸出像素約為 (128, 0, 127),一種介於紅色與藍色之間的深洋紅色。這正是柔邊邊緣處您想要的視覺表現:來源顏色貢獻其比例,新背景貢獻其餘部分,完全透明與完全不透明區域之間不會出現鋸齒狀的邊界。一個完全透明的來源像素會產生 (0, 0, 255),也就是所選的藍色;而一個完全不透明的來源像素則會產生 (255, 0, 0),即保持不變的紅色。
來源 Alpha 與輸出行為對照
| 來源像素 Alpha | 輸出像素的構成方式 |
|---|---|
| 0(完全透明) | 輸出與所選背景顏色完全相同 |
| 介於 1 到 254 之間 | 輸出為來源與背景以 Alpha 加權混合的結果 |
| 255(完全不透明) | 輸出與來源像素完全相同 |
每個像素都會套用相同的混合方式,因此最低的非零 Alpha 級距、以及略高於與略低於二分之一的數值,都會以一致的方式處理。不進行任何門檻化、不使用不透明遮罩,也不做「大致透明」的猜測。
為何此工具只接受 PNG 檔案
此工作流程的重點在於處理透明度,而 PNG 是能可靠定義透明度的格式。JPEG 完全不包含 Alpha 色階,因此工具沒有可替換的內容。WebP 雖然可以攜帶 Alpha,但其 Alpha 行為與中繼資料處理方式會因編碼器與解碼器而異,使輸出結果難以預測。GIF 僅支援單一的二元透明旗標,屬於不同的模型,並非此工作流程的設計目標。將輸入限制為 PNG 可讓契約保持單純:瀏器解碼一張 PNG、將每個像素合成在單一所選顏色之上,然後輸出一張 PNG。這就是整份工作,每次都完全相同。
運作限制
| 限制項目 | 數值 | 保護的對象 |
|---|---|---|
| 解碼前的檔案大小 | 25 MiB | 來源載入所需時間 |
| 解碼後的像素預算 | 16 megapixels | 覽器的解碼像素緩衝區 |
| 最大邊長 | 每邊 12,000 pixels | 異常龐大的單一尺寸 |
| 輸入格式 | 僅限 PNG | 可預期的 Alpha 行為 |
| 輸出格式 | PNG,完全不透明 | 通用目的地支援 |
若檔案副檔名為 PNG 但內容包含無效位元組,則會產生明確的解碼錯誤,而不是產生部分結果。尺寸永遠不會被更改,因此輸出畫布會使用與來源完全相同的寬度與高度。
挑選合適的背景顏色
請選擇影像實際放置位置的顏色,而不是您在編輯時覺得方便的顏色。市集商品列表與大多數文件工作流程通常使用純白色,這也是最常見且最安全的選擇。社群圖片與深色主題介面通常需要設計系統所提供的特定十六進制值,而不是憑猜測決定。品牌素材則必須符合經核准的色票。透過棋盤格預覽來挑選顏色並不可靠,因為棋盤格圖案的設計用意是代表「無顏色」,而非用來呈現最終目的地。
下載新的 PNG 後,請以實際檢視時的大小開啟它,並針對目的地顏色檢查柔和邊緣。反齒後的文字、投影、頭髮和圓角圖示邊角,是混合效果不佳時最先出現問題的區域。該工具會產生技術上定義明確的合成結果,但並不保證品牌合規性、印刷顏色匹配、市集接受度或無障礙對比,因此這些檢查仍由使用者負責。
加上背景後的後續步驟
若目的地需要不同的尺寸,請另以獨立步驟進行調整。在加上背景之後再調整大小,可將幾何決策與色決策分開處理,因此之後若改變尺寸,不會在不知情的情況下針對不想要的背景重新合成。影像縮放工具 可在瀏器中將任何影像調整為精確的像素尺寸,是此工作流程中合理的下一步。
若目的地需要的是 JPEG 而非 PNG,請先下載不透明的 PNG,再進行轉檔。PNG 轉 JPG 工具可在瀏覽器中將 PNG 轉為 JPG 並縮小檔案大小。將「加上背景」、「調整尺寸」與「格式轉換」分為獨立步驟,可讓每個輸出都更容易檢查,並避免單一工具悄悄混淆幾何、顏色與有損壓縮等不同考量。
若您正在權衡各種方案,如何在不損失品質的前提下縮小 GIF 檔案大小 一文對此有詳細說明。
若您正在權衡各種方案,如何在 Photoshop 中為 PNG 加上背景 一文對此有詳細說明。