CSS 遮罩简介

Alpha 透明度与亮度

mask-mode 属性的默认值——match-source——会根据具体值将模式设置为 alpha 或 luminance。对于除 SVG 元素外的所有遮罩源，match-source 值会解析为 alpha。如果遮罩源是 元素，match-source 会解析为该 的 mask-type 属性值（如果已设置）。否则，它会解析为在 元素上设置的 SVG mask-type 属性的值。如果该属性也未明确设置，match-source 将解析为 luminance。

如果 mask-mode 解析为 luminance，或者我们明确将其设置为 luminance，遮罩的颜色将影响遮罩的不透明度。在前面的演示中，没有设置 mask-mode，因此其值默认为 match-source。由于彩色心形图像是透明的 PNG，match-source 解析为 alpha。通过明确设置此属性，我们可以控制模式。在此演示中，我们将 mask-mode 更改为 luminance。

css.applied-mask {

mask-mode: luminance;

}

当对与前一个示例相同的遮罩应用 mask-mode: luminance 时，元素中遮罩颜色最亮的区域更不透明，而较暗的区域则不那么不透明。

亮度遮罩的不透明度由 RGB 颜色的 R、G、B 和 A 值通过以下公式确定：

((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A

例如，最新的 是 rebeccapurple，即 #663399。虽然人们可能认为其亮度可能等同于 hsl() 颜色函数的 L 值，但并非如此简单。值 #663399 等同于 rgb(40% 20% 60% / 1) 和 hsl(270 50% 40% / 1)，但其亮度值为 27.134%，而不是 40%。

((0.2125 * 0.4) + (0.7154 * 0.2) + (0.0721 * 0.6)) * 1 = 0.27134

白色的亮度值为 100%。

((0.2125 * 1) + (0.7154 * 1) + (0.0721 * 1)) * 1 = 1

黑色的亮度为 0%。

((0.2125 * 0) + (0.7154 * 0) + (0.0721 * 0)) * 1 = 0

我们将通过在一个包含 rebeccapurple、white 和 black 的线性渐变中，添加不透明度为 27.234% 的白色（rgb(100% 100% 100%)，其亮度为 100%）来演示这一点，然后用这个渐变来遮罩我们的图像。这个白色会解析为相同的不透明度值。

((0.2125 * 1) + (0.7154 * 1) + (0.0721 * 1)) * 0.27134 = 0.27134

css.applied-mask {

mask-image: repeating-linear-gradient(

to bottom left,

rebeccapurple 0 20px,

rgb(100% 100% 100% / 0.27134) 20px 40px,

black 40px 45px,

white 45px 50px

);

mask-mode: luminance;

}

.mask-source {

background: repeating-linear-gradient(

to bottom left,

rebeccapurple 0 20px,

rgb(100% 100% 100% / 0.27134) 20px 40px,

black 40px 45px,

white 45px 50px

);

}

:has(:checked) .applied-mask {

mask-mode: alpha;

}

mask-mode: alpha;

white 遮罩的区域是完全不透明的。black 遮罩的区域是完全透明的。rebeccapurple 遮罩的区域和不透明度为 27.1234% 的白色遮罩的区域，其不透明度均为 27.1234%。

如果将 mask-mode 切换为 alpha，渐变的颜色将不再重要。除了被半透明白色覆盖的区域外，整个元素都将是不透明的。

mask-mode 属性使得可以使用没有 Alpha 透明度的栅格图像（如 JPEG）作为遮罩图像。JPEG 由不透明像素组成。如果使用 JPEG 作为遮罩并采用其默认的 alpha 遮罩模式，将会隐藏整个元素。另一方面，mask-mode 的 luminance 值会在遮罩为黑色（没有亮度）的地方裁剪元素，在遮罩为不透明白色（100% 亮度）的地方完全不透明，其他区域则根据遮罩区域的亮度呈现半透明状态。

在这个示例中，我们有一个白色月亮悬挂在黑色夜空中的图像。

css.applied-mask {

mask-image: url("https://mdn.github.io/shared-assets/images/examples/moon.jpg");

mask-mode: luminance;

mask-size: 220px;

}

.mask-source {

background: url("https://mdn.github.io/shared-assets/images/examples/moon.jpg");

background-size: 220px;

}

在天空是黑色的地方，元素被裁剪且不可见。在月亮最亮的地方，图像最为可见。

在这种情况下，如果将 mask-mode 切换为 alpha，整个元素将变得可见，因为整个遮罩都是不透明的。