在自選的不透明顏色上進行 Alpha 合成，是為 PNG 加入背景的技術上正確做法，因為它會混合每一個來源像素——包括反鋸齒文字、柔邊陰影、毛髮以及羽化去背邊緣中的半透明像素——而不僅僅是填入 alpha 為零的像素。正確的合成會將來源 RGB 乘以其 alpha，將背景 RGB 乘以 1 減去該 alpha，再把兩個結果相加，將每個通道四捨五入為 8 位元，並把輸出的 alpha 設為完全不透明;這正是 W3C《Compositing and Blending Level 1》中所定義的標準 source-over 運算。輸出畫布會維持與來源相同的寬度與高度，因此一張 1024×768 的 PNG 輸出後仍然是 1024×768 的 PNG。檔案會在當前的瀏覽器分頁中，以記憶體內的畫布進行處理;原始檔案永遠不會被修改，而下載的檔案會以「-background」重新命名，讓透明的原始檔案仍易於辨識。這種結合——正確的逐像素運算、不變的幾何尺寸、以及僅限在本機的處理——正是可靠的 PNG 背景工作與僅做平面填色、卻在柔邊留下光暈與錯誤顏色的做法之間的差別。
為什麼為 PNG 加入背景時會出錯
大多數 PNG 背景的問題，來自於忽略了透明度背後的數學。PNG 將每個像素儲存為 RGBA，而「透明」通常指的是漸層，而不是二元的開/關狀態。最便宜的做法——找出每個 alpha 等於零的像素，然後把背景色蓋上去——聽起來很合理，但它忽略了每一個半透明的像素。在圓角圖示周圍，這種便宜的做法會留下光暈;在反鋸齒文字周圍，它會留下毛邊;在柔邊陰影周圍，它會留下一條生硬的邊界。沒有合成的填色也假設了背景是唯一會混進邊緣的顏色，而當設計師是在某個有色畫板上匯出 logo 時，這種假設幾乎不會成立。
第二個常見的錯誤來源，是把透明度視為檔案的屬性，而不是像素的屬性。PNG 的透明度是逐像素的 alpha。JPEG 根本沒有 alpha 通道，因此任何從 JPEG 開始的工作流程，都已經失去了合成所需的資訊。其他瀏覽器可解碼的格式(如 WebP 與 GIF)雖然可以有透明度，但它們在詮釋資料、動畫處理與色彩管理上的行為會因應用程式而異，這也是為什麼一個為單一透明輸入打造的工具，會比一個試圖處理所有格式的工具更值得信任。為 PNG 加入背景工具刻意把輸入契約收得很窄:一張 PNG 進去、一張不透明 PNG 出來、尺寸相同。
正確的背景替換實際上做了什麼
對於每一個解碼後的 RGBA 像素，將來源 RGB 乘以來源 alpha，將所選的不透明背景 RGB 乘以 1 減去來源 alpha，再把兩個結果相加，把每個通道四捨五入為 8 位元整數，並把輸出 alpha 設為 255。這就是標準的 source-over 合成，也是 W3C《Compositing and Blending Level 1》規格中所描述、被MDN Canvas 合成教學所使用的同一個運算。瀏覽器會把 PNG 解碼進記憶體內的畫布，執行合成，匯出一張新的 PNG，而完全不碰原始檔案。
一個快速的演算範例能讓行為更具體。假設有一個來源像素是紅色 (255, 0, 0),alpha 為 128 / 255(約半透明)，而選定的背景色是純藍 (0, 0, 255)。合成會逐通道計算。
| 通道 | 來源 × alpha | 背景 × (1 − alpha) | 結果 |
|---|---|---|---|
| R | 255 × (128 ÷ 255) = 128 | 0 × (127 ÷ 255) = 0 | 128 |
| G | 0 × (128 ÷ 255) = 0 | 0 × (127 ÷ 255) = 0 | 0 |
| B | 0 × (128 ÷ 255) = 0 | 255 × (127 ÷ 255) = 127 | 127 |
像素變成 (128, 0, 127)，一種紫色混合——既不是純紅也不是純藍。一個完全透明的像素(alpha 0)會變成剛好等於選定的背景色。一個完全不透明的像素(alpha 255)則完全不變。這就是為什麼同一個工具能同時處理在硬白背景上的 logo，以及在同一份工作中的羽化產品去背，而無需任何特殊模式或門檻值。
如何在瀏覽器中為 PNG 加入純色背景
整個工作流程只有三個步驟，無需任何設定。在任何現代瀏覽器中開啟「為 PNG 加入背景」頁面，然後依照下列步驟操作。
- 從你的裝置選擇一張透明或半透明的 PNG，大小上限為 25 MiB。解碼後的像素也會被限制在總計 1600 萬像素以內，任一邊的像素數上限為 12000，因此即使檔案大小低於 25 MiB，若其像素尺寸超過這些限制仍會被拒絕。
- 開啟瀏覽器的色彩控制項，選擇與圖片實際使用環境相符的純色背景，然後選擇「加入背景」。
- 以正常瀏覽大小，對照目標用途的顏色檢視不透明的預覽結果，然後下載 PNG。檔案會保留來源寬度與高度，並以「-background」重新命名，讓原始檔案仍易於辨識。
如果 PNG 無法解碼，頁面會回傳清楚的解碼錯誤，而不是半完成的圖片。這種情況通常發生在副檔名為 .png、但內部位元組無效的檔案——例如被重新命名的 JPEG，或下載時被截斷的檔案。請替換來源檔案後再試一次。
避免邊緣褪色與顏色錯誤的實用技巧
選擇目標顏色，而不是猜測的顏色。白色對 marketplace 列表與印刷文件來說是合理的預設值，但深色介面、帶有品牌背景的社群圖片，以及印刷版面，通常需要特定的 HEX 值。先挑出真正的顏色，再執行合成。
以完整大小檢視柔邊。頁面上的預覽會以實際的輸出解析度呈現，因此反鋸齒邊緣與陰影會以它們在目標環境中出現的樣貌顯示。若在 100% 縮放下出現光暈，通常代表目標顏色選錯，而非數學計算的 bug。
保持輸入契約的單純。這個工具只接受 PNG，因為它是瀏覽器中具有可預期逐像素 alpha 行為的格式。若檔案目前是帶透明度的 JPEG、WebP 或 GIF，請先轉成 PNG，再執行背景步驟。
把背景步驟與其他編輯分開。合成並不會裁切、縮放、銳利化、降噪或為了目標檔案大小而壓縮。若目標用途需要不同的尺寸，請先加入背景，再執行 圖片縮放工具。若目標用途需要 JPEG，請下載不透明的 PNG，再用 PNG 轉 JPG 工具轉檔。把每個操作分開處理，能讓結果保持可解釋。
把這個工具視為精準的合成器，而非認證工具。輸出是一個技術上定義明確的合成結果;它並不認證品牌合規、印刷色彩匹配、marketplace 接受度，或對所選顏色的無障礙對比。
常見錯誤與避免方法
下列錯誤是人們嘗試「壓平」PNG 時最常出現的。它們會以錯誤做法與正確做法並排的方式整理，方便直接對照。
| 錯誤做法 | 出了什麼問題 | 正確做法 |
|---|---|---|
| 只替換 alpha 為零的像素 | 在反鋸齒文字、柔邊陰影、毛髮與羽化圖示周圍出現光暈與毛邊。 | 使用標準 source-over 運算，將每個 RGBA 像素合成到所選的背景上。 |
| 從棋盤格預覽中猜測背景顏色 | Logo 在螢幕上看起來沒問題，放到目標用途卻出錯。 | 在按下「加入背景」之前，先挑出真正目標表面的精確 HEX 值。 |
| 在加入背景的同時進行縮放或壓縮 | 幾何尺寸飄移、邊緣糊化、品質損失被藏在一個操作裡。 | 單獨執行加入背景的步驟，再使用專門的縮放工具調整大小，或用專門的轉檔工具轉換格式。 |
| 把檔案送到需要上傳的線上工具 | 機密的 logo、簽名與產品去背圖會離開本機裝置。 | 使用在本機瀏覽器中執行的合成器;檔案從記憶體內的畫布讀取，永遠不會被送到遠端伺服器。 |
| 把 JPEG 餵進透明度工作流程 | 根本沒有 alpha 通道可供合成，結果充其量只是重新上色。 | 先把來源轉成 PNG，再加入背景。 |
| 把結果當成品牌或印刷合規的認證 | 合成在技術上正確，但未經色彩度量驗證。 | 以完整大小，將最終圖片對照品牌或印刷打樣進行確認。 |
加入背景之後:當你需要縮放或不同格式時
輸出是一張尺寸與來源相同、檔名帶有「-background」後綴的單一不透明 PNG。以下三種後續情境很常見，值得預先規畫。
若目標用途需要不同大小，請不要請背景工具順便縮放。請對不透明 PNG 使用圖片縮放工具;如此可以讓背景顏色保持精準，並執行一次乾淨的重採樣。若目標用途需要較小的檔案或 JPEG 格式，請下載不透明 PNG，再用「PNG 轉 JPG」工具轉檔。JPEG 的品質等級設定，適合放在「PNG 轉 JPG」步驟中處理;把它與加入背景的步驟分開，代表調整品質時不會偷偷把圖片重新上色。如果你需要找出一個不在螢幕上的精確 HEX 值，請用 圖片取色器 從原始素材中取樣，再貼到瀏覽器的色彩控制項中，讓背景對應到真正的目標表面，而不是某個近似值。
延伸閱讀:使用圖片 DPI 計算機時應避免的錯誤。