Alpha 通道

逐像素的透明度数据通道,在 PNG 和 WebP 中实现半透明和平滑抠图效果。

Alpha 通道是与 RGB 并列的第四个通道,用于存储每个像素的透明度信息,对应 RGBA 中的 A。其理论基础由 Porter 和 Duff 在 1984 年发表的 Alpha 合成论文中确立。

Alpha 值通常为 0-255 (8 位);PNG 也允许 16 位精度 (0-65535),CSS 的 rgba() 则使用 0 到 1 的小数 (也可用百分比指定)。以 8 位为例:

支持 Alpha 通道的格式:

JPEG 不支持 Alpha 通道,因此需要透明效果时应选择 PNG、WebP 或 AVIF。将透明图像转换为 JPEG 时,透明区域会被背景色填充 (扁平化),因此转换前需先确定背景色。

实务中常见的陷阱是存储方式的差异。非预乘 Alpha (直接 Alpha) 原样保存颜色值,而预乘 Alpha (premultiplied alpha) 保存的是已乘以 Alpha 的颜色值;PNG 采用前者。合成时混用两种方式,会在半透明边缘出现不自然的暗边或亮边。

在 Web 开发中,Alpha 通道对于透明 Logo、UI 叠加层、图像合成和特效至关重要。与 CSS opacity 统一控制整个元素不同,Alpha 通道可以逐像素指定透明度,实现复杂形状的抠图和边缘平滑的抗锯齿效果。

相关术语

相关文章