為 PNG 加上背景 是一款免費、無需註冊的工具,能將 PNG 檔案中的透明像素替換為任何純色,並產生一張保留原始像素尺寸的不透明 PNG。整個處理程序都在你的瀏覽器分頁中執行,因此不需要建立帳號、不需要驗證電子郵件,也不需要上傳到遠端伺服器。你只要開啟頁面、選擇一張 PNG、挑一個顏色,再下載新檔案即可。瀏覽器會解碼影像、將每個像素與你選定的顏色進行合成,然後匯出一張新的 PNG,檔名會加上 "-background" 後綴。由於原始檔案永遠不會被修改,也永遠不會離開你的裝置,因此這個工作流程非常適合私密草稿、內部產品圖片,以及任何需要建立帳號會拖慢作業或產生合規疑慮的情境。此工具一次只接受一張 PNG,並在解碼前處理最大 25 MiB 的檔案,這遠高於大多數標誌、簽名、產品去背圖和匯出的設計素材所需。它也會將處理上限設為 16 百萬像素,以及最長邊 12,000 像素,以確保解碼後的像素緩衝區不會超過一般瀏覽器分頁所能容納的範圍。

透明 PNG 何時會變成問題
PNG 是標誌、產品去背圖、簽名、圖示和匯出設計素材的首選格式,正是因為它儲存了 alpha 通道。這個 alpha 通道讓圖案能夠乾淨地放在彩色頁面、深色模式介面、市集商品頁或簡報上。然而,當目的地不支援透明度時,同樣的 alpha 通道就會造成麻煩。電子郵件用戶端、部分 PDF 檢視器、某些印刷流程、許多 CMS 上傳工具,以及少數社群平台,會將透明度靜悄悄地壓平為白色,或顯示出在實際使用上看起來像壞掉的棋盤圖樣。貼紙列印服務、刺繡檔案轉換器,以及一些舊式企業表單,則會直接拒絕透明的輸入。
在這些情況下,人們往往會想打開一款重量級編輯器、登入雲端服務,或把素材上傳到一款要求你輸入電子郵件才能下載結果的免費轉換器。但對於單純加上純色背景來說,這些都不是必要的。把透明度替換為單一顏色是一項確定性的像素操作,而瀏覽器在頁面載入後,無需帳號、外掛或網路連線就能輕鬆完成。結果會和你在桌面編輯器中製作的 PNG 完全相同,無浮水印、不傳送到伺服器,也不綁定任何訂閱。
免費為 PNG 加上背景,無需註冊
以下的三步驟就是完整的工作流程。沒有登入畫面、沒有驗證碼,也沒有電子郵件驗證關卡。
- 選擇一張最大 25 MiB 的透明或半透明 PNG。開啟 為 PNG 加上背景 頁面,並從你的裝置中選取一個 PNG 檔案。副檔名為 .png 但位元組無效的檔案會產生明確的解碼錯誤,而不是產生損毀的結果,因此錯誤的檔案類型不會悄悄產生損壞的影像。
- 選擇符合最終目的地的純色背景,然後點選「加上背景」。瀏覽器的色彩控制項提供六位數十六進位值,頁面會在任何像素處理開始前驗證輸入。請選擇圖片實際放置的表面顏色,而非猜測的棋盤色。
- 檢查不透明預覽,然後下載保留原始像素尺寸的 PNG。預覽呈現的像素與將寫入磁碟的像素完全相同。下載的檔名以 "-background" 結尾,讓你一眼就能分辨原始透明檔案與新的不透明版本。
原始的透明 PNG 永遠不會被覆寫,因此如果你需要同時保留兩個版本,可以並存。每一次下載都是從目前分頁產生的全新檔案,這代表清除瀏覽器快取或關閉頁面不會影響任何已儲存到磁碟的 PNG。
瀏覽器如何合成透明與半透明的像素
這個工作流程最有趣的地方在於邊緣的處理。從設計工具匯出的標誌,極少只有完全透明與完全不透明的像素。反鋸齒的文字、柔和陰影、毛髮、圓角圖示和羽化的去背圖,都含有 alpha 值介於 0 到 1 之間的像素。一款只簡單替換 alpha 為零之像素的天真工具,會讓那些半透明的像素仍然與舊背景在視覺上相連,並在新顏色上產生光暈或外框效果。
「為 PNG 加上背景」改為使用標準的 source-over 合成。針對每個解碼後的像素,來源 RGB 會乘以來源 alpha,選定的背景 RGB 會乘以 1 減去該 alpha,兩者的貢獻會相加,然後通道會四捨五入為 8 位元整數。輸出端的 alpha 接著會被設為 255,代表完全不透明。結果是一個物理上合理的混合,而非單純的臨界遮罩。一個半透明的紅色像素在藍色背景上會變成紫色,而不是純紅或純藍。完全不透明的來源像素則維持不變。完全透明的像素會變成精確的所選背景顏色。這與 W3C《Compositing and Blending》規範所定義、由 MDN Canvas 合成教學 所說明的簡單 alpha 合成模型相同,因此其運算結果與專業設計工具針對相同輸入所產生的結果一致。其底層行為也記載於 W3C simple alpha compositing 參考資料 中。
| 來源 alpha | 來源顏色 | 選定背景 | 輸出顏色(四捨五入) |
|---|---|---|---|
| 0 (完全透明) | 任意 | 選定顏色 | 精確等於選定背景 |
| 1 (完全不透明) | 任意 | 選定顏色 | 來源顏色不變 |
| 0.5 (半透明) | 紅 255, 0, 0 | 藍 0, 0, 255 | 紫 128, 0, 128 (約略值) |
| 介於 0 與 1 之間 | 任意 | 選定顏色 | 依 alpha 加權混合 |
檔案限制與處理前應確認的事項
此工具刻意保持功能精簡。它只接受 PNG,因為透明度正是此工作流程的目的。JPEG 沒有 alpha 通道,因此「替換透明度」這個問題根本不存在。其他可由瀏覽器解碼的格式,在不同應用程式間對透明度與中繼資料的處理方式不一致,這會使輸出變得更難預測。將輸入限制為 PNG,能讓結果易於理解:瀏覽器解碼一張 PNG、將每個像素合成在選定顏色上,然後匯出一張 PNG。
在你點選下載之前,有三個限制值得了解。
- 解碼前的檔案大小:最大 25 MiB。這涵蓋實際使用中所有常見的標誌、簽名、圖示和產品去背圖。
- 解碼後像素預算:上限為 16 百萬像素,且最長邊 12,000 像素。PNG 檔案在磁碟上可能很小,解碼後在記憶體中卻可能非常大,此上限可保護瀏覽器分頁免於處理異常龐大的像素緩衝區。
- 顏色輸入:六位數十六進位值。頁面會在處理開始前驗證格式,因此輸入錯誤無法進入畫布。
如果目的地需要不同的尺寸,正確的工作流程是先加上背景,然後再單獨調整大小。在合成前調整大小會改變半透明邊緣的混合方式,而此工具刻意不進行尺寸調整,因為把兩個操作結合會悄悄改變使用者並未要求變更的幾何結構。同樣的區隔原則也適用於格式轉換、壓縮,以及任何其他應獨立保留以便稽核的調整。
為目的地挑選正確的背景顏色
最常見的錯誤就是選錯顏色。對許多市集、文件和電子郵件附件來說,白色是正確答案,但社群圖片、深色介面、印刷版面和品牌系統通常需要特定的 HEX 值。設計畫布上的棋盤預覽並不是可靠的依據,因為真正圍繞圖案的是最終表面的顏色。
一個務實的做法是先檢查目的地表面。擷取一張螢幕截圖,使用 影像顏色選取器 從周圍區域取得精確的 HEX 值,然後將該值貼到顏色輸入欄中。若要使用一般的白色背景,數值為 FFFFFF。若是非純白的品牌背景,則複製品牌風格指南提供的精確值。所選顏色越接近實際目的地,邊緣看起來就越不會像是貼上去的。
下載後,以正常檢視大小在實際目的地上開啟新檔案。在預覽中對選定顏色看起來正確的柔和邊緣,當周圍背景略有不同時,仍可能讀起來像光暈。此工具會產生技術上明確的合成結果,但並不保證品牌合規、印刷色彩匹配或市集接受度。
何時應接續進行尺寸調整或格式轉換
加上背景是較長工作流程中的一個步驟,當問題只在於透明度時,它就是該停下來的地方。當目的地有額外需求時,下一步應該由另一個工具來處理,讓每個結果都易於驗證。
| 目的地需求 | 建議的下一個工具 | 為何應分開處理 |
|---|---|---|
| 不同的像素尺寸 | 影像縮放工具 | 在合成前調整大小會改變柔和邊緣的混合方式,因此單獨處理幾何變更較易稽核。 |
| JPEG 輸出 | PNG 轉 JPG | PNG 轉 JPG 是失真重新編碼,對已經不透明的檔案執行此操作,會比要求單一工具同時壓平與轉換產生更可預期的檔案大小。 |
| 更小的檔案大小 | 影像壓縮工具 | 壓縮品質是獨立的決策,在幾何結構已最終確定的不透明 PNG 上進行,較容易控制。 |
讓每一個轉換都由各自的工具處理,是無帳號工作流程能夠成立的原因。瀏覽器不需要追蹤工作階段、儲存設定檔或記住專案。每個工具接受一項輸入、執行一項明確定義的操作,並產生一個可預期的輸出。對於只需要一張不透明 PNG 而不想建立帳號的使用者來說,這種可預期性就是全部的重點。
若想深入了解,請參閱 免費黑白照片轉換器,無需註冊。
若想深入了解,請參閱 如何將禮物卡 GIF 分割為編號的 PNG。