图像透明度

图像透明度让图像的一部分可以透出背景。它使用 Alpha 通道控制哪些像素完全可见、半透明或完全透明。

透明度如何工作

标准 RGB 图像的每个像素会保存三个值：红、绿、蓝。这三个通道组合出可见颜色。透明图像还会增加第四个通道，也就是 Alpha 通道，用来控制每个像素的不透明程度。

Alpha 通道会为每个像素保存一个数值，通常从 0（完全透明）到 255（完全不透明）。Alpha 值为 128 的像素有 50% 的透明度，后方颜色会以一半强度透出。这种逐像素控制可以实现从不透明到透明的平滑渐变、能自然融入任何背景的柔和阴影，以及不会产生阶梯状锯齿的平滑边缘。

把透明图像放在另一张图像或有色背景上时，渲染引擎会合成各个图层：对每个像素按照 Alpha 值混合前景色与背景色。浏览器、设计工具和图像查看器都会实时完成这项合成。

Alpha 通道要为每个像素多保存一个数值，因此会增加文件大小。对于 1000x1000 的图像，未经压缩的 Alpha 通道大约会增加 100 万字节。压缩可以降低这部分开销，但透明图像通常仍比完全不透明的同类图像稍大。

支持透明度的格式

并非所有图像格式都支持透明度，支持方式也各不相同。

• PNG——支持完整 Alpha 透明度，每个像素有 256 个不透明度级别。透明截图、图标和界面元素通常使用这一格式，兼容性也很广。
• WebP——有损和无损模式都支持完整 Alpha 透明度。多数情况下，透明图像的文件比 PNG 更小，且主流浏览器普遍支持。
• GIF——只支持二值透明。每个像素只能完全透明或完全不透明，无法半透明，因此边缘容易出现锯齿。适合简单动画，不适合对透明效果要求较高的图像。
• AVIF——支持完整 Alpha 透明度，压缩效率很高。它可以生成体积很小的透明图像，但编码较慢，平台兼容范围也更窄。
• SVG——通过 CSS 和属性控制形状级别的不透明度。SVG 是矢量格式，因此透明度按元素定义，而不是按像素定义。
• JPG——完全不支持透明度。保存时，透明区域会变成纯色。

格式的选择取决于具体流程。需要尽可能兼容时，PNG 是稳妥的默认选择；用于网页优化时，WebP 在文件大小与支持范围之间较为均衡。

透明度与截图

普通截图会如实记录屏幕，包括全部背景。生成的图像完全不透明，因为屏幕显示的是实色内容，不存在透明像素。

透明度会在几类截图流程中发挥作用。例如，要把窗口或界面元素用于营销素材、文档或演示文稿时，先删除背景并改为透明，就可以把截取的元素自然放在任何底图上。

部分截图工具可以直接截取带透明背景的单个窗口，在截图时移除桌面或应用背景。其他工具则先生成普通不透明截图，之后再用背景移除工具分离主体并添加透明度。

透明截图尤其适合应用商店展示图、落地页或推介演示文稿中的产品画面。界面元素可以放在品牌背景、设备样机或其他元素旁边，不会露出明显的矩形边界。

因此，透明度在截图后处理阶段往往更有用。团队可以只分离一次窗口或界面卡片，保存为透明素材，然后在营销版式、文档和设备样机图中反复使用。

常见错误

• 把透明图像保存为 JPG。 JPG 不支持透明度。透明区域会被纯色填充，透明数据也会永久丢失。应改用 PNG、WebP 或 AVIF。
• 不在不同背景上检查透明效果。 在白色背景上看起来正常的图像，放到深色背景上可能出现白边或光晕。发布前应在多种背景颜色上测试透明图像。
• 把棋盘格当成图像内容。 图像编辑器中的灰白棋盘格表示透明区域，并不是图像的一部分。正确展平或导出后，输出中不应出现这种图案。
• 忽略 Alpha 通道增加的文件体积。 透明度会增加数据。图像若不需要透明区域，删除 Alpha 通道可以生成更小的文件。部分导出工具支持在无需透明度时移除该通道。