GIF 的透明只有一位
GIF 的一帧会指定调色板中的某一项为透明色。每个像素要么就是这一项——完全不可见,要么不是——完全不透明。中间没有别的。整个机制就这些。
PNG、WebP 以及带 alpha 通道的视频,每个像素存的是 8 位透明度,所以一个像素可以是 40% 不透明。GIF 表达不了这件事,任何编码器参数都改变不了。
透明 GIF 会出现黑色光晕、锯齿边缘,以及一圈"导出时背景是什么颜色"的杂边。这些都不是工具的 bug——是这个格式在精确执行它 1987 年的设计。搞清楚哪一部分根本无解,你就知道什么时候该停止和它较劲。
2026 年 9 月 12 日 · 约 6 分钟
GIF 的一帧会指定调色板中的某一项为透明色。每个像素要么就是这一项——完全不可见,要么不是——完全不透明。中间没有别的。整个机制就这些。
PNG、WebP 以及带 alpha 通道的视频,每个像素存的是 8 位透明度,所以一个像素可以是 40% 不透明。GIF 表达不了这件事,任何编码器参数都改变不了。
抗锯齿的做法,是让边缘像素部分透明,好让曲线融进背景而不是呈阶梯状。当这样的图被转成 GIF,每一个"部分透明"的像素都必须变成完全不透明或者完全不可见。
它当时融的是什么背景,就被烤进去了。在白底上合成、导出,然后把这个 GIF 放到深色页面上,边缘像素就带着一圈白边。在黑底上合成,你就得到那个著名的黑色光晕。光晕的颜色恰好告诉你这个文件当初是在什么背景上被压平的。
如果你的透明 GIF 有白色光晕,说明它是在白底上压平的。用目标背景色重新导出,能在那个特定背景上把问题藏起来。
这些都换不来真正的 alpha,但每一件都能明显减轻边缘的难看程度。
如果这个动画必须干净地贴在一个未知或会变化的背景上,GIF 就是错的容器,再怎么调也没用。
PNG 或 WebP 序列帧保留完整 alpha,可以直接导入 After Effects、Blender 和所有精灵图打包器。VP9 编码的 WebM 支持 alpha,在 Chrome、Edge 和 Firefox 里能播。动画 WebP 保留 alpha 且现代浏览器支持度已经不错,但老邮件客户端不行。选哪个,完全取决于最终由谁来打开它。
| 格式 | Alpha | 适合 |
|---|---|---|
| GIF | 1 位——开或关 | 到处都能内联自动播放、老客户端 |
| PNG 序列帧 | 8 位 | 把帧交给其他软件 |
| WebP(动画) | 8 位 | Web,且受众用的是现代浏览器 |
| WebM(VP9) | 8 位 | Chrome / Edge / Firefox 上的网页叠加层 |
编辑器会在透明区域后面画灰色棋盘格,好让你看见它们。那是视口约定而不是内容,永远不会写进导出的文件。
如果你导出的 GIF 上真的有棋盘格,说明被压平的是预览而不是文档——通常是有人截了编辑器的图,而不是真的导出。