Alpha 通道
逐像素的透明度数据通道,在 PNG 和 WebP 中实现半透明和平滑抠图效果。
Alpha 通道是与 RGB 并列的第四个通道,用于存储每个像素的透明度信息,对应 RGBA 中的 A。其理论基础由 Porter 和 Duff 在 1984 年发表的 Alpha 合成论文中确立。
Alpha 值通常为 0-255 (8 位);PNG 也允许 16 位精度 (0-65535),CSS 的 rgba() 则使用 0 到 1 的小数 (也可用百分比指定)。以 8 位为例:
- 0:完全透明 - 背景完全可见
- 255:完全不透明 - 像素颜色原样显示
- 1-254:半透明 - 通过合成运算与背景混合
支持 Alpha 通道的格式:
- PNG:支持 8 位或 16 位 Alpha (以非预乘方式存储),广泛用于 Web 透明图像
- WebP:有损和无损模式均支持 Alpha
- AVIF:高压缩率下完整支持 Alpha
- TIFF:支持多个 Alpha 通道,适用于印刷/DTP 工作流
- GIF:仅支持二值透明 (将调色板中的 1 种颜色指定为透明色),无法表现半透明
JPEG 不支持 Alpha 通道,因此需要透明效果时应选择 PNG、WebP 或 AVIF。将透明图像转换为 JPEG 时,透明区域会被背景色填充 (扁平化),因此转换前需先确定背景色。
实务中常见的陷阱是存储方式的差异。非预乘 Alpha (直接 Alpha) 原样保存颜色值,而预乘 Alpha (premultiplied alpha) 保存的是已乘以 Alpha 的颜色值;PNG 采用前者。合成时混用两种方式,会在半透明边缘出现不自然的暗边或亮边。
在 Web 开发中,Alpha 通道对于透明 Logo、UI 叠加层、图像合成和特效至关重要。与 CSS opacity 统一控制整个元素不同,Alpha 通道可以逐像素指定透明度,实现复杂形状的抠图和边缘平滑的抗锯齿效果。