为什么我的透明 PNG 变成黑色了？

你有一个透明背景的 logo。你上传它、或转换它、或把它放进一份文档，然后透明的部分变成一块实心黑色矩形。那个文件刚才明明好好的。

没有任何东西损毁。过程中某个环节必须决定“透明的地方要放什么”，而它选了黑色。

Alpha 通道，以及缺少它的格式

一个透明的 PNG 每个像素存四个值：红、绿、蓝，以及 alpha——那个像素有多不透明。alpha 为零代表完全透明，而那里的颜色值通常没有意义，往往就留成零。零红、零绿、零蓝，就是黑色。

JPEG 完全没有 alpha 通道。它无法表示“这里什么都没有”。所以把一张透明 PNG 转成 JPEG 会逼出一个决定：每一个透明像素都必须变成某个真实的颜色。

一个谨慎的转换器会问你，或者默认填白色。一个草率的则直接丢掉 alpha 通道、留下底下原本的颜色值——而如上所述，那通常是零。黑色就是从这里来的。它不是刻意选了黑色；它是没有做选择。

它会在哪里咬你

• 链接预览图。多数预览渲染器不支持透明，而一张透明背景的 Open Graph 图常常显示成一张黑色卡片。
• iOS App 图标。Apple 要求完全不能有 alpha 通道。一个透明的图标不是被退就是被填黑——这就是为什么那么多送出去的 App 图标看起来像一个 logo 浮在深色砖块上。
• 电子邮件。好几个邮件软件会把图片压平到它自己选的背景上，而在深色模式下那个选择可能是黑的。
• Office 文档和打印。透明通常能活到 PowerPoint 和 Word 里，但导出成某些格式、以及多数打印路径，会把它压平。
• 较旧的看图软件。有些会把透明显示成黑色，而不是你习惯的棋盘格——这种情况下文件是好的，只有预览在误导你。

解法：刻意地压平

可靠的做法是自己做那个决定，而不是留给下一个碰到这个文件的软件。

在转换之前，把图片放在一个你要的颜色的实心背景上，然后压平。接着再转换。现在没有透明可以丢失，下游也没有任何工具需要做选择。

要哪个颜色取决于它要去哪。多数文档和浅色页面用白色，预览卡片用你的品牌色，如果你知道实际的页面背景就用那个。重点是你选了它，一次，而且是知情的。

而在透明真的被支持的地方——一个网站、一个 App 界面——就留着 PNG，根本不要转。这个问题只存在于“有 alpha 的格式”遇上“没有 alpha 的格式”的那个交界。

哪些格式支持透明

• PNG——完整的 256 级 alpha。标准选择。
• WebP——完整 alpha，而且文件比 PNG 小。
• AVIF——完整 alpha，又更小。
• SVG——透明是原生的；它根本不是像素格式。
• GIF——只有一个位。见下。
• PDF——支持，但打印可能会压平它。
• JPEG——没有。这就是每个人都会绊倒的那一个。
• BMP——技术上可能，实务上支持很差。

GIF 的一位透明与难看的光晕

GIF 支持透明，但只是一个开关：每个像素不是完全透明就是完全不透明。没有中间。

这件事要紧，因为平滑的边缘仰赖部分透明。一个曲线的 logo 边缘，是由 30% 不透明、60% 不透明……这样的像素画出来的，和后面的东西融合。GIF 存不了那些，所以每一个都变成不是实心就是不见。

结果就是 GIF logo 那种锯齿、硬边的样子，以及那个恶名昭彰的白色光晕：如果图片是在白底上做的，半透明的边缘像素会被四舍五入成不透明的白，于是 logo 抵达深色页面时戴着一圈淡淡的边。

没有任何设置能修好这个。这就是格式本身。用 PNG 或 WebP。

反过来的同一个问题：淡色边

偶尔一张有正常 alpha 的 PNG，在深色背景上还是会显出一圈浅色轮廓。这是一个相关的缺陷：那些边缘像素在制作图片时就已经和白色混合过了，而那个白被烤进了半透明像素的颜色值里。

解法在上游——从原始稿件重新导出一次，在透明或同样深色的背景上。一旦那圈边进了像素里，没有任何转换能移除它。

寄出去之前的检查

两个快速测试，几乎能抓到全部：

• 放在黑底和白底上各看一次。一个只在其中一个上看起来对的 logo，有边缘问题。一个在其中一个上会消失的，需要一个明确的背景。
• 确认目的地到底支不支持 alpha。如果不支持——预览卡片、App 图标、印刷工作——在交出去之前自己把它压平。

速查

• JPEG 没有 alpha 通道；转换必须填满透明的区域
• 会出现黑色，是因为完全透明底下被丢弃的颜色值通常是零
• 转换之前自己压平到一个选定的颜色上
• 在透明真的被支持的地方就留着 PNG 或 WebP
• GIF 只有一位透明——锯齿边和白色光晕，无法避免
• 淡色边代表白色被烤进边缘像素；从原稿重新导出
• 每一张透明图都要在黑底和白底上各测一次