透過對每個檔案執行一次相同的本機瀏覽器工作流程，為多個 PNG 檔案加上背景：挑選一張透明 PNG、選擇一個純色，然後下載一張與原始尺寸相同的不透明 PNG。每個檔案會在目前分頁中完成解碼、合成與匯出，完全不離開瀏覽器，這代表沒有上傳佇列，也沒有共用服務在幕後排程批次工作。在這個情境下，一批透明 PNG 不過是一連串由你自行觸發的單檔執行，因此不論你處理的是十張產品去背圖的資料夾，還是一長串匯出的圖示，同樣的操作都能有一致可預期的表現。由於每次執行都是獨立的，你可以為每個檔案挑選配合最終使用位置的背景顏色；而每張輸出都保留來源的寬度與高度，因此整個資料集的版面配置、對齊與格線計算都能維持有效。
為何一次一張的瀏覽器工作流程能處理多個 PNG 檔案
大多數批次影像工具都承諾提供佇列功能：丟入五十個檔案、選擇一組設定，然後放著不管。為 PNG 加上背景工具並不是這樣運作的，而這正是刻意設計。它不接受任意混雜的格式並試圖推測每張圖的需求，而是一次接受一張 PNG、執行一個嚴謹定義的合成流程，然後輸出一張不透明 PNG。重複執行這個工作流程多少次都可以，這就是處理一整個資料夾透明 Logo、簽名、產品去背圖或圖示匯出的方式。
這樣的形式對多檔工作有三個實質優勢：
- 個別檔案的色彩選擇。放在深色頁尾的 Logo 可以使用一個色碼值，而放在 marketplace 商品頁面的貼圖則使用白色。逐一執行代表每張輸出都能配合實際顯示位置，而不是所有檔案都使用同一個妥協的顏色。
- 可預期的輸出規格。每張輸出都是不透明 PNG，且寬高與來源相同，這讓整批檔案的格線版面、CSS 尺寸以及印刷尺寸都能保持穩定。
- 預設的隱私保護。由於每次執行都在瀏覽器分頁中進行，不會有任何 PNG、色彩選擇或結果被送往伺服器。你可以在機密草稿、內部產品圖或尚未公開的品牌素材上重複執行這個工作流程，而無須改變任何資安作為。
即使你的批次只有單一目的地與單一顏色，形式仍然一樣：一張 PNG 進、一張 PNG 出，然後重複。
如何在瀏覽器中為 PNG 加上背景
- 在目前分頁中開啟「為 PNG 加上背景」工具。
- 從你的裝置中選擇一張透明或部分透明的 PNG，檔案大小上限為 25 MiB。
- 挑選與 PNG 實際使用位置相符的純色背景，透過瀏覽器的色彩控制項輸入六位數色碼值。
- 選擇「加上背景」，等待瀏覽器解碼檔案、將每個像素合成至選定顏色之上，並渲染出不透明預覽。
- 在正常檢視大小下檢視預覽，確認頁面上顯示的輸出尺寸、檔案大小與檔案名稱。
- 下載產生的 PNG，其寬高與來源相同，並在檔名後加上「-background」。
若要處理整個資料夾的檔案，只要回到第二步並挑選下一張透明 PNG 即可。原始檔案永遠不會被修改，因此在其他地方編輯過來源後再重新執行是安全的。
來源在上合成如何處理每個像素
這個工具並非執行粗糙的透明度遮罩，而是對不透明背景執行標準的來源在上（source-over）合成，這與 W3C 合成與混合規格所描述的模型相同，並透過 MDN canvas 合成指南涵蓋的 canvas API 實作。針對每個解碼後的 RGBA 像素，來源 RGB 乘以其 alpha 值，背景 RGB 乘以一減去該 alpha 的值，接著將兩者相加，將各通道四捨五入為一般的 8 位元整數，並將輸出 alpha 設為 255。
| 來源 alpha | 工具執行的動作 | 視覺結果 |
|---|---|---|
| 0（完全透明） | 直接使用背景 RGB | 像素變成完全等同於所選背景顏色 |
| 128 / 255（約一半） | 來源 RGB 與背景 RGB 按比例混合 | 邊緣像素呈現介於來源與背景之間的中間色 |
| 255（完全不透明） | 直接使用來源 RGB | 來源像素保持不變並位於背景之上 |
舉例來說，一個半透明的紅色像素 (255, 0, 0)、alpha 為 128，疊在藍色背景 (0, 0, 255) 之上時，會貢獻來自自身的 (128, 0, 0) 與來自背景的 (0, 0, 127)，四捨五入後合計為 (128, 0, 127)，這正是預期的紫色混合，而非純紅或純藍。這種可預期的混合效果，讓反鋸齒文字、柔和陰影、毛髮邊緣以及羽化過的產品去背圖，在整批檔案的新背景上看起來都自然。
影響大量 PNG 處理的限制
每次執行都有一些硬性限制，在處理一長串檔案之前你應該先了解，因為它們決定了特定檔案是否能順利解碼：
| 限制 | 數值 | 存在的原因 |
|---|---|---|
| 最大解碼像素面積 | 16 megapixels | 限制瀏覽器需配置的記憶體中像素緩衝區 |
| 最大邊長 | 任一邊 12,000 pixels | 防止出現異常高或異常寬的來源 |
| 解碼前的最大檔案大小 | 25 MiB | 限制瀏覽器一次讀取的壓縮資料量 |
| 接受的輸入格式 | 僅限 PNG | 本工具專門用於以純色取代 PNG alpha |
前三項限制針對的是解碼後的 RGBA 緩衝區，而非壓縮檔案大小，因此一張檔案大但壓縮率高的 PNG，若其實際像素面積超過 16 megapixels，或任一邊超過 12,000 pixels，仍可能無法解碼。副檔名為 .png 但內容含有無效位元組的檔案會產生明確的解碼錯誤，而非靜默失敗。JPEG 輸入會被拒絕，因為 JPEG 不帶 alpha 通道；而其他瀏覽器可解碼的格式，在不同應用程式之間的透明度與中繼資料行為不一致，因此這個工具刻意維持嚴格的輸入規範。
若批次中的某個檔案太大而無法解碼，正確的做法是先使用專門的調整大小工具將其縮放，再回到「為 PNG 加上背景」。先縮放再合成，可讓最終的顏色混合在新尺寸下保持正確，且原始的透明檔案在磁碟上不會被更動。
為最終目的地選擇合適的背景顏色
棋盤格預覽只能呈現透明度，無法告訴你目的地實際的樣貌。對 marketplace 商品頁面和多數印刷文件而言，白色 (#FFFFFF) 是安全的預設值。對深色模式介面、深色主題的社群圖片，以及深色紙張上的印刷版面而言，白色容易在反鋸齒邊緣留下可見的光暈，在周圍內容中看起來也不協調。品牌系統與印刷色彩指南會指定精確的色碼值，而無障礙指南則要求前景內容與背景之間應有量測過的對比，因此正確的背景就是那個符合 PNG 實際擺放位置的顏色。
一個簡短的工作流程能讓多個檔案都保持這種一致性：
- 開啟 PNG 即將出現的目的地頁面、投影片或版面。
- 從你的樣式指南中取出精確的背景色碼，或使用選色器從實際表面上取樣。
- 將該色碼值輸入工具中的瀏覽器色彩控制項。
- 下載後，以正常檢視大小將新的 PNG 放入目的地，並在真實背景上檢視柔和邊緣、毛髮與陰影。
若目的地是深色介面，而來源 PNG 是以透明背景與深色反鋸齒匯出的，你可能會發現柔和邊緣在深色表面上看起來略顯混濁。這並非 bug，而是來源在上合成忠實呈現了原始邊緣顏色。修正方法是挑選與目的地相符的色碼值，而非設法繞過混合效果。
將結果與流程中的下一步搭配
加上背景之後，常見的後續任務有好幾項，而這些任務最好交由各自的工具處理，而不是硬塞進加背景這一步：
- 需要不同的尺寸。在加上背景之後，再縮放不透明 PNG。先縮放再加上背景雖然也行，但先執行加背景代表你能以實際打算使用的尺寸檢視最終的顏色混合，通常能更早發現邊緣問題。
- 需要 JPEG 格式。將不透明 PNG 透過 PNG 轉 JPG 轉換器處理。在加背景之前轉檔會喪失 alpha 通道，使本工具無法運作。
- 需要加上邊框。在加上背景之後再處理邊框，讓邊框繪製於最終不透明背景上，而非透明畫布上。
- 需要加上浮水印。在加上背景之後再加上浮水印，讓浮水印與版面其他部分共用同一張不透明表面。
區分步驟能讓每張輸出都易於檢查，並避免因更換背景而悄悄縮放影像、切換成失真格式，或以錯誤順序堆疊視覺效果。這種區分也是本工具精確保留來源尺寸的原因：每張輸出的幾何就是其輸入的幾何，只額外套用一項可預期的變更。
想進一步了解，請參閱 多張圖片黑白照片轉換器。
想進一步了解，請參閱 在瀏覽器中將多張圖片合併為單一 PNG。