PNG 加入背景
在本機以精確純色取代 PNG 透明區域,同時保留原始畫素尺寸。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.選擇一張不超過 25 MiB、完全或部分透明的 PNG。
- 2.選取符合最終使用情境的純色背景,再點選「加入背景」。
- 3.檢查不透明預覽,並下載維持原始畫素尺寸的 PNG。
關於PNG 加入背景
PNG 加入背景可用純色取代透明與半透明畫素,而且不會上傳來源檔案。選擇 PNG、透過瀏覽器色彩控制項指定任意顏色,即可建立寬高不變的新不透明 PNG。結果包含頁面預覽、精確輸出尺寸、檔案大小與直接下載。當標誌、商品去背圖、簽名、圖示或匯出設計含有透明背景,而目的地要求一般純色背景時,這項工具特別實用。
本工具只接受 PNG,因為處理透明度正是此流程的目的。JPEG 沒有 Alpha 色版,其他瀏覽器可解碼格式在不同應用程式中的透明度與中繼資料行為也可能不一致。縮小輸入範圍能讓輸出更可預測:瀏覽器解碼一張 PNG,把每個畫素合成到單一所選顏色上,再匯出一張 PNG。原始檔案不會被修改。下載檔名會加上「-background」,方便與透明來源檔區分。
半透明邊緣會和完全透明區域接受相同的合成處理。這對反鋸齒文字、柔和陰影、髮絲、圓角圖示與羽化去背邊緣尤其重要。若只取代 Alpha 為零的畫素,半透明邊緣仍會在視覺上依附舊背景。本工具會依來源 Alpha 比例保留來源色彩,並由所選背景補足剩餘比例,最後把輸出 Alpha 設為完全不透明。這是以不透明背景執行的標準 source-over 合成,不是臨界值判斷或粗略透明遮罩。
例如,半透明紅色畫素疊在藍色上會形成紫色混合,而不是純紅或純藍。完全不透明的來源畫素保持不變,完全透明的畫素則精確變成所選背景色。實作會依外部黃金案例檢查零 Alpha、完整 Alpha、略高於與略低於一半的數值、代表性色版混合,以及最低的非零 Alpha 階。色版結果會四捨五入為一般 8 位元整數,再匯出 PNG。
畫布會保留來源畫素尺寸,不會裁切、縮放、銳化、去雜訊,也不會為了目標檔案大小壓縮圖片。若目的地需要不同尺寸,請先加入背景,再使用圖片調整尺寸工具;若需要 JPEG,請下載不透明 PNG 後使用 PNG 轉 JPG。把操作拆開能讓每次結果更容易理解,也避免背景變更暗中改變幾何尺寸或有損品質。
處理上限為 1,600 萬畫素,且任一邊不得超過 12,000 畫素。這項限制可保護瀏覽器,避免異常巨大的解碼畫素緩衝區消耗遠高於壓縮檔案大小的記憶體。解碼前檔案上限為 25 MiB。副檔名是 PNG 但內容無效的檔案會顯示清楚的解碼錯誤。瀏覽器色彩輸入會提供六位十六進位值,邏輯也會在處理前驗證該值。
所有操作都發生在目前分頁中。預覽使用暫時的本機 Object URL,圖片變更或頁面關閉時就會釋放。畫素資料從記憶體中的 Canvas 讀取、合成並匯出。圖片、顏色選擇與結果都不會傳送至 Lizely。這使工具適合機密草稿與私人商品圖片,但仍應遵守組織對本機裝置的政策。
請依真正的使用目的地選擇背景,不要只根據棋盤格預覽猜測。白色常用於市集與文件,但社群圖像、深色介面、印刷版面與品牌系統可能要求特定 HEX 值。下載後,請以正常觀看尺寸在目的地顏色上檢查柔和邊緣。本工具產生的是技術定義明確的合成結果,不保證品牌規範、印刷色彩匹配、市集審核或無障礙對比一定符合要求。
方法與來源
對每個已解碼 RGBA 畫素,以來源 Alpha 乘上來源 RGB,再以一減來源 Alpha 乘上所選不透明背景 RGB;兩者相加並四捨五入為 8 位元色版,輸出 Alpha 設為 255。尺寸保持不變,處理上限為 1,600 萬畫素。
常見問題
- 這會保留半透明邊緣嗎?
- 會。每個來源畫素都會依 Alpha 合成至所選顏色,因此柔和邊緣與陰影會自然混合,不會只被視為透明或不透明。
- 圖片尺寸會改變嗎?
- 不會。輸出 Canvas 使用完全相同的來源寬度與高度;若目的地需要其他尺寸,請另用圖片調整尺寸工具。
- 為什麼只接受 PNG?
- 本工具專門用來取代 PNG 透明度。縮小輸入範圍可避免暗示每種瀏覽器圖片格式都會以相同方式保留 Alpha 與中繼資料。
相關工具
圖片工具 使用指南
查看全部- How to Add a Background to a PNG for Your Website (英文原文)
- Add a Background to a PNG for Instagram (英文原文)
- Add a Background to a PNG for Email Attachment (英文原文)
- Add Background to PNG for Beginners: A Quick Walkthrough (英文原文)
- Add Background to PNG Explained: How Transparency Is Replaced (英文原文)
- Add a Background to Multiple PNG Files in Your Browser (英文原文)
- Add Background to PNG: A Local Browser Alternative (英文原文)
- Replace PNG Transparency with a Solid Background Color Locally (英文原文)
- How to Add a Background to a PNG in Photoshop (英文原文)
- How to Add a Background to a PNG File (Keep Same Size) (英文原文)
- How to Add a Solid Background to a PNG (Keep the Same Size) (英文原文)
- Add a Solid Background to Any GIF in Your Browser (英文原文)
- Convert WebP to GIF on Mac Without Uploading It (英文原文)
- How to Convert WebP to GIF in Your Browser (英文原文)
- Convert SVG to PNG With a Transparent Background (英文原文)
- How to Convert SVG to JPG in Windows Without Software (英文原文)
- How to Make an Image a Solid Color in Photoshop (英文原文)
- Add Rounded Corners to a Photo in Your Browser (英文原文)
- How to Convert PNG to JPG Without Losing Quality (英文原文)
- Image Placeholder for Photoshop, Without the App (英文原文)