Alpha 通道是 存储在像素中的第四个值，用于控制其透明度，与设置其颜色的红色、绿色和蓝色值并排。 Alpha 的范围从完全不可见到完全实心，以及介于两者之间的各个级别的部分透明。这是 PNG 徽标可以干净地漂浮在任何背景上而 JPG 不能的唯一原因，因为 JPG 根本没有 Alpha 通道。透明度不是眼睛的把戏，也不是整个图像的属性；它是一种视觉效果。它是附加到每个单独像素的数据。本指南解释了什么是 Alpha 通道、它如何存储数百个透明度级别、将透明图层混合在一起的合成数学、哪些格式支持它，以及当您将图像从一种格式转换为另一种格式时会发生什么。

Alpha 通道实际上是什么

每个数字图像都是像素网格，每个像素都存储描述它的数字。在标准彩色图像中，每个像素包含红色、绿色和蓝色的三个数字。 Alpha 通道添加了第四个数字来回答不同的问题：不是这个像素是什么颜色，而是 你应该看到多少内容。像素可以是亮红色且完全实心、亮红色且半透明、或亮红色且完全不可见。三种情况下颜色保持不变；只有阿尔法发生变化。这种颜色与不透明度的分离使得灵活的透明度成为可能。

该术语来自 Thomas Porter 和 Tom Duff 于 1984 年发表的 alpha 合成作品，该作品正式阐述了如何将图像与透明度相结合。他们的模型仍然是每个现代图形程序、网络浏览器和游戏引擎的基础。因此，Alpha 通道并不是最近才出现在图像格式上的便利工具。这是一个已有数十年历史的想法，悄然为你在屏幕上看到的几乎所有内容提供动力。

RGBA：每个透明像素中的第四个值

当像素带有透明度时，它用四个值而不是三个值来描述，写为 RGBA：红、绿、蓝和 Alpha。在设计和网络工作中，这种符号随处可见。在 CSS 中，像 rgba(255, 0, 0, 0.5) 这样的颜色表示不透明度为 50% 的纯红色。在图像编辑器中，相同的想法显示为图层上的不透明度滑块。 A 始终是不透明度值，分层在颜色之上而不是混合到颜色中。

将 alpha 与颜色分开很重要。如果将透明度融入到颜色值中，则半透明的红色必须存储为浅粉色，并且您永远无法恢复原始红色或将其干净地放置在深色背景上。通过将不透明度存储为自己的通道，该格式可以保持真实颜色完整，并让软件决定如何将其与其后面的任何内容混合。这种灵活性正是设计人员使用 Alpha 通道导出资源而不是将其预先混合到背景上的原因。

Alpha 如何存储透明度级别

Alpha 通道不仅仅存储打开或关闭。在标准 8 位图像中，alpha 保持 256 个不同级别，从 0 到 255。值 0 表示像素完全透明且不可见，255 表示像素完全实心且不透明，中间的每个数字都会产生部分透明度。值为 128 使像素大约半透明，让背景以 50% 的强度显示。

这 256 个级别使透明度看起来平滑而不是粗糙。投影逐渐淡出，因为其像素向边缘传递的 alpha 值逐渐减小。玻璃或烟雾效果之所以有效，是因为不同像素的透视程度不同。更高端的格式进一步推进：16 位 Alpha 通道提供 65,536 个级别 对于专业合成，虽然 8 位是网络图像的标准并且涵盖了眼睛需要的一切。

Alpha 合成：混合图层的数学

当透明像素位于背景上时，软件必须计算出您看到的最终颜色。它通过一个简单的混合公式来做到这一点。可见结果等于 前景色乘以 alpha，加上背景色乘以 1 减去 alpha。简单来说，70% 不透明的像素贡献 70% 的自身颜色，并让 30% 的背景透过。

在每个像素上运行该计算，您就会得到一个干净的合成图像：将徽标混合到照片上，在视频上淡出标题，在网页上绘制菜单。这种情况不断发生。每当浏览器绘制半透明元素或游戏渲染一股烟雾时，它每秒都会执行数百万次 Alpha 合成。 Alpha 通道提供公式所需的每个像素的不透明度值。

抗锯齿：为什么 Alpha 使边缘平滑

阿尔法通道最重要的工作之一是生产 干净、抗锯齿的边缘。考虑圆形徽标的弯曲边缘。如果没有透明度，曲线就必须由硬方形像素构建，从而使其呈现锯齿状、阶梯状的外观。使用 Alpha 通道，沿边缘的像素将设置为部分透明，将形状逐渐混合到其后面的任何内容中。

这就是为什么精心制作的 PNG 徽标在白页、黑页或照片上看起来很清晰。边缘像素没有涂成白色或任何单一颜色；它们是部分透明的，因此它们可以在每种背景下正确混合。将徽标压平为白色，这些相同的边缘像素将变成部分白色。将展平的版本放在深色背景上，您会看到丑陋的苍白光晕，因为平滑的混合被锁定为错误的颜色。 Alpha 通道使边缘保持适应性。

直接与预乘 alpha

有两种方法可以将颜色和 Alpha 存储在一起，了解其中的差异可以防止出现一类令人沮丧的错误。在 直阿尔法，颜色值保持不变，并且 alpha 保持完全独立，这就是 PNG 存储透明度的方式。在 预乘阿尔法，颜色值提前乘以 alpha，因此 50% 的透明红色已存储为较深的红色。

预乘 Alpha 在视频、电影合成和实时渲染中很常见，因为它使某些混合操作更快并避免边缘出现暗边。直接 Alpha 对于静态图像和 Web 资源来说更为常见，因为它可以保持原始颜色可恢复。当软件期望其中之一而收到另一个时，就会出现问题，产生看起来太暗或异常明亮的边缘。对于使用 PNG 和网页图形进行日常图像处理，您需要处理直接 Alpha，软件会为您处理它。

哪些图像格式支持 Alpha 通道

并非每种格式都可以存储透明度，这是转换过程中令人困惑的实际细节：

巴布亚新几内亚： 具有 256 个级别的完整 8 位 Alpha 通道，这是透明 Web 图形的标准。
网页版： 无损和有损模式下的完整 Alpha 通道，同时生成比 PNG 更小的文件。
视频文件： 一种具有 Alpha 支持和强大压缩功能的现代格式，浏览器支持不断增长。
动图： 只有简单的开或关透明度，没有部分级别，因此边缘看起来很粗糙。
TIFF 和 SVG： 两者都支持透明度，分别用于打印和矢量工作。
JPG 和 BMP： 根本没有 Alpha 通道，因此它们无法存储任何透明度。

结论是，当透明度必须存在时，PNG 和 WebP 是您可靠的选择，GIF 仅适用于硬边剪切，而 JPG 不适用于任何透明的内容。

Web 和 CSS 中的 Alpha 通道

在网络上，Alpha 通道出现在两个位置：图像文件内部和 CSS 颜色值内部。透明的 PNG 或 WebP 在文件本身中携带其 Alpha，因此它可以分层在任何页面背景上。然后，CSS 使用 rgba() 和 hsla() 颜色以及不透明度属性添加第二层控制，让您可以淡入淡出元素、着色叠加并构建玻璃效果，而无需编辑图像。

这种组合就是现代界面看起来层次分明、柔和的原因。英雄部分可能会使用 CSS Alpha 在照片上叠加半透明的深色叠加层，以使白色文本可读，而顶部的徽标则使用图像 Alpha 干净地放置在其中任何一个上。两者都依赖于相同的基本思想：每个像素都有自己的不透明度，浏览器将所有内容实时合成在一起。

转换为 JPG 时 Alpha 会发生什么变化

由于 JPG 没有 Alpha 通道，因此将透明图像转换为 JPG 会迫使您做出决定：必须用实体来替换透明度。转换器 展平 Alpha，用背景颜色填充每个透明或半透明像素，最常见的是白色。透明区域变得实心，依赖部分 Alpha 的平滑边缘被锁定为填充颜色。

这正是为什么徽标在转换后最终会出现在白色或黑色盒子中，或者在其边缘周围显示出微弱的光晕的原因。将其与新背景混合所需的信息消失了，因为 JPG 没有地方可以存储它。如果您需要透明度才能生存，答案是保留 PNG 或转换为 WebP。当您真正想要一个平面图像时，选择正确的填充颜色很重要。我们的转换器让您选择白色、黑色或自定义颜色进行填充，或导出 WebP 以完全保留 Alpha 通道，透明背景指南走过。

常见的透明度问题以及如何避免这些问题

大多数透明度问题都可以追溯到 Alpha 通道被展平到错误的颜色，这一步骤称为抠图。以下是常见的罪魁祸首：

白盒或黑盒： 转换为 JPG 的透明 PNG 会用纯色填充其背景。将填充与目标匹配，或保持透明度。
边缘光晕或边缘： 徽标垫在白色上，然后放置在深色背景上，显示出苍白的轮廓。从原始透明文件重新导出，并贴上正确的颜色，或保持透明。
暗边： 通常是直接与预乘 alpha 不匹配。使用正确的 alpha 类型重新导出可以修复此问题。
编辑后失去透明度： 展平图层或另存为 JPG 会丢弃 Alpha。保留分层或 PNG 母版。

几乎可以防止所有这些问题的规则是：在拼合之前确定背景，并保留仍然具有 Alpha 通道的原始文件，以便您可以干净地重新导出。

常见问题

什么是 Alpha 通道？

Alpha 通道是 控制透明度的每像素值，从完全不可见到完全实心，与设置像素颜色的红色、绿色和蓝色一起存储。

RGBA是什么意思?

RGBA 代表 红色、绿色、蓝色和 Alpha。 Alpha 值设置像素颜色之上的不透明度，因此 rgba(255, 0, 0, 0.5) 为 50% 的红色。

为什么PNG有透明度而JPG没有？

因为 PNG 包含 Alpha 通道，而 JPG 不包含。如果没有地方存储每个像素的不透明度，JPG 根本无法保存任何透明度。

Alpha 通道可以存储多少级透明度？

标准 8 位图像中有 256 个级别，从 0 表示不可见到 255 表示实体。专业 16 位 alpha 提供 65,536 个级别的精细合成。

当我转换为 JPG 时，Alpha 通道会发生什么变化？

它被压扁了。 透明区域填充纯色，通常是白色，因为JPG没有办法存储不透明度数据。

哪些图像格式支持 Alpha 通道？

PNG、WebP、AVIF、TIFF 和 SVG 支持 Alpha，PNG 和 WebP 提供平滑的部分透明度。 GIF 仅具有开或关透明度，而 JPG 则没有。

直接 alpha 还是预乘 alpha 更好？

两者都不是普遍更好。他们适合不同的工作。 直接 Alpha 保持颜色可恢复 适合静态图像，而预乘 Alpha 可加快视频和实时渲染的混合速度。

减小文件大小时如何保持透明度？

转换为 WebP 代替 JPG。 WebP 保留 Alpha 通道，同时将尺寸缩小 25% 到 35%，因此背景保持透明，文件变得更亮。