為網站的透明 PNG 加上實色背景,代表要把每一個 alpha 透明的像素都替換成精確的顏色,同時保留原本的寬度和高度,讓圖片仍然能套用與來源相同的 CSS 排版、相同的 HTML img 標籤,或是相同的 hero 區塊標記。最終會得到一個完全不透明的 PNG,在所有瀏覽器、所有支援 HTML 的電子郵件用戶端,以及所有預覽縮圖中都呈現相同的外觀,因為所有像素的 alpha 通道都已被設為完全不透明。這項技術適用於需要在背後加上色塊的標誌、必須放在白色卡片上的商品去背圖、需要對深色頁首仍清晰可讀的簽名圖檔,以及必須符合品牌色彩的圖示。它不會變更檔案的像素尺寸,不會裁切、銳化或重新編碼可見的圖像內容,並會保留每個不透明主體的相對位置。
為什麼透明 PNG 在網站上的表現會有所不同
透明 PNG 在透明區域中不帶有任何顏色資訊,這代表瀏覽器、社群卡片渲染器或預覽產生器可以自由顯示圖片背後的任何內容。在淺色頁面上通常沒有問題。但在深色主題中,同一個標誌看起來可能會像版面被挖了一個洞。在有顏色的 hero 區塊中,去背邊緣會沾上該區塊的顏色而顯得混濁。在市集縮圖中,平台可能會強制加上白色背景,讓標誌的反鋸齒陰影變成淡灰色的環。
網頁設計系統通常會為重要的圖像提供明確的背景圖塊:在圖片背後加上顏色矩形、在外層元素上設定 CSS background-color,或是直接使用已經把正確顏色烤進去的扁平化 PNG。扁平化的方式最為可預測,因為檔案是自給自足的,每個檢視者看到的顏色都相同,而且在那些不支援 CSS,或是會把圖片扁平化為縮圖的環境中也能正常運作。這正是 為 PNG 加上背景 工具設計的目的:它會產生一個把新顏色烤進像素中的不透明 PNG,而不是依賴宿主頁面來提供顏色。
透明 PNG 也會在一些較不顯眼的地方造成麻煩。擷取螢幕截圖的瀏覽器擴充功能,常常會以保留 alpha 通道的方式儲存圖片,在擴充功能預覽中看起來正常,但貼到簡報中時就會失去原本的脈絡。快取的 favicon、應用程式商店的螢幕截圖,以及嵌入的 Twitter 或 X 卡片圖片,都會被其所在平台扁平化為固定背景,所以原本透明的檔案就會變成平台決定的顏色。提供一個不透明的檔案可以徹底消除這種模糊地帶。
為網站用的 PNG 加上實色背景
- 從電腦中選擇一張透明或部分透明的 PNG。可接受高達 25 MiB 的檔案,且畫布上限為 16 百萬像素、最長邊不得超過 12,000 像素,以維持瀏覽器的流暢度。
- 開啟瀏器的顏色控制項,挑選網站在圖片背後將使用的精確背景顏色。請對照網站 CSS、品牌指南或主題檔中的數值,而不是憑預覽猜測。
- 點選 加入背景。瀏覽器會解碼 PNG,使用標準的 source-over alpha 混合將每個像素合成到所選顏色上,把輸出的 alpha 通道設為完全不透明,並顯示新圖片的預覽。
- 以正常檢視大小查看預覽。特別留意反鋸曲線、陰影,以及原本去背圖與來源背景融合處產生的半透明光暈。
- 下載新的 PNG。下載的檔名會加上「-background」,方便與透明的原始檔區分。
為網路目的地挑選合適的顏色
輸出 PNG 中的背景顏色應該對應實際的目的地,而不是從棋盤格預覽去猜測。以下是幾個常見的網頁情境,以及通常適用的顏色:
| 網路目的地 | 常見的背景選擇 | 為何重要 |
|---|---|---|
| 色模式商品卡片 | 與卡片相符的白色或米白色 | 避免去背圖反鋸齒邊緣出現灰色光暈 |
| 深色模式導覽列或頁尾 | 品牌深色或主題深色十六進位色 | 讓標誌或圖示無需額外圖塊即可清晰可讀 |
| 市集或賣家縮圖 | 依平台規範使用純白 | 避免平台自行重新扁平化為白色 |
| 帶有品牌色的 Hero 區塊 | 風格指南中的精確十六進位色 | 不再需要使用 CSS background-color 外層 |
| 可印刷的 PDF 或下載檔 | 紙張白或品牌米色 | 避免在透明度被扁平化處出現黑色條紋 |
瀏器的顏色輸入接受六位數十六進位值,且會在處理圖片前進行驗證,因此打錯字會顯示明確的錯誤,而不是靜默地套用預設值。如果不知道精確的十六進位色,可對即時頁面的螢幕截圖使用滴管工具,這是快速取得顏色的方法。
半透明邊緣的處理方式
透明 PNG 很少在每個邊緣都是完全透明的。標誌周圍的反鋸曲線、商品下方的柔和陰影、簽名圖檔的羽化邊緣,以及圖示的圓角,全都依賴 alpha 值介於零和完全不透明之間的像素。如果直接把這些像素替換為所選的背景顏色,柔和的邊緣就會消失,陰影也會變成實心的輪廓。
本工具的合成邏輯遵循 W3C《Compositing and Blending Level 1 規範》所記載,並於 MDN Canvas 合成教學中也有對應說明的標準 source-over 公式。針對每個解碼後的 RGBA 像素,來源 RGB 色頻乘以來源 alpha、所選不透明背景的 RGB 色頻乘以一減去來源 alpha,兩者相加後四捨五入為 8 位元色頻,接著把輸出的 alpha 設為 255。
| 來源像素狀態 | 來源 alpha | 產生的像素 |
|---|---|---|
| 完全透明 | 0 | 完全等於所選背景顏色,不透明 |
| 半透明(反鋸齒邊緣) | 約 128 | 來源顏色與背景的中間混合,不透明 |
| 完全不透明的來源像素 | 255 | 維持不變,不透明 |
舉例來說,一個位於 PNG 透明區域上、與所選藍色背景合成的半透明紅色像素,其計算過程如下:來源貢獻為 255 乘以 128 再除以 255,紅色色頻四捨五入為 128,色與藍色皆為 0;背景貢獻為 0 乘以 127 再除以 255,紅色與色皆為 0,255 乘以 127 再除以 255,藍色色頻四捨五入為 127;兩項貢獻相加得到約 (128, 0, 127) 的柔和紫色,輸出 alpha 設為 255。同一公式適用於檔案中每一個反鋸齒像素,因此柔和的陰影仍維持柔和,圓角則保留原有的弧度。
加入背景之後:尺寸、格式與效能
加入背景並不會改變幾何尺寸。輸出畫布使用與來源完全相同的寬度和高度,因此新的 PNG 沿用相同的寬高屬性、相同的 CSS 尺寸規則,以及相同的響應式圖片標記。如果網路目的地需要不同的尺寸,應先加入背景,再以獨立步驟執行縮放,讓每個變更都保持可追蹤。
如果目的地偏好比 PNG 更小的檔案大小,可以在加入背景後再轉檔。對於相片類內容,WebP 通常比 PNG 小;至於不含透明度的全彩影像,JPG 又通常比兩者都小。當圖片仍需要 alpha 通道以支援 hover 狀態、覆蓋效果或分層 hero 區塊時,PNG 仍是正確的選擇。在匯出為 JPG 前若忘記先把透明標誌扁平化,常常會產生意外的黑色或白色填色,因為 JPEG 編碼器必須為空白區域填入某個顏色。
本機瀏器處理與網站資產隱私
網站資產常包含草稿標誌、未公開的商品照片、內部品牌 mockup,以及機密的 UI 螢幕截圖。為了單純的改背景而把這些檔案上傳到公開伺服器,通常並不值得。本工具的處理流程完全在當前分頁中執行:在記憶體中解碼 PNG、自瀏覽器顏色輸入讀取所選顏色、將每個像素合成到 canvas 上,再透過瀏覽器的下載路徑匯出結果。預覽使用的是暫時的本地 Object URL,會在圖片變更或分頁關閉時釋放。整個過程不會將任何資料傳送到遠端服務,磁碟上的原始檔案也絕不會被修改。
嚴格的輸入契約對於可預測性同樣重要:瀏器解碼一張 PNG、將每個像素合成到一個選定顏色上,再輸出一張 PNG。其他可由瀏覽器解碼的格式,可能會以不一致的方式處理透明度,或在影像外包裹後續應用程式解讀方式不同的中繼資料。只接受 PNG 能讓輸出保持明確:PNG 進、PNG 出,相同的像素尺寸、完全不透明的 alpha 通道,以及檔名結尾為 -background,以便於在下載資料夾中辨識。
如需深入了解,請參《為圖片加上浮水印:從輸入到 PNG 的完整解析》。
如需深入了解,請參閱《在 PowerPoint 中移除圖片背景顏色》。