DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
mask-mode
CSS 属性指示 CSS 遮罩层图像 是否被视为 alpha 遮罩或亮度遮罩。
.element {
mask-image: url(sun.svg);
mask-mode: alpha;
}
语法
mask-mode: alpha | luminance | match-source
该属性接受一个关键字值,或一个由两个或所有三个 alpha
、luminance
和 mask-source
值组成的逗号分隔列表。
- 初始值:
match-source
- 应用于:所有元素。在 SVG 中,它应用于容器元素(不包括元素),所有图形元素。
- 继承:否
- 计算值:指定的值
- 动画类型:离散
值
/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
alpha
:指定应将遮罩层图像的 alpha 值(alpha 通道)用作遮罩值。luminance
:指定应将遮罩图像的亮度值用作遮罩值。match-source
:默认值,它将遮罩模式设置为 alpha,前提是mask-image
属性的遮罩引用是 CSS<image>
元素(如图像 URL 或渐变)。但是,如果mask-image
属性的遮罩引用是 SVG<mask>
元素,则必须使用引用的<mask>
元素的 mask-type 属性指定的值。initial
:应用属性的默认设置,即match-source
。inherit
:采用父元素的 mask-mode 值。unset
:从元素中删除当前的 mask-mode。
使用多个值
此属性可以采用遮罩模式值的逗号分隔列表,并且每个值都应用于 mask-image
属性中指定的相应遮罩层图像。
在以下示例中,第一个值指定与第一个图像对应的遮罩模式,第二个值指定与第二个图像对应的遮罩模式,依此类推。
.element {
mask-image: url(image1.png), url(image2.png), url(image3.png);
mask-mode: luminance, alpha, match-source;
}
Alpha 和亮度遮罩
CSS 中的遮罩提供了两种方法,它们在计算遮罩值方面存在一些差异。
Alpha 遮罩
图像由像素组成,每个像素都包含一些数据,其中包含颜色值,可能还有包含透明度信息的 alpha 值。具有 alpha 通道的图像可以是alpha 遮罩,例如具有黑色和透明区域的 PNG 图像。
在简单的遮罩操作中,我们有一个元素和一个放置在其顶部的遮罩图像。遮罩图像中每个像素的 alpha 值将与其在元素中对应的像素合并。
- 如果 alpha 值为零(即透明),则它会胜出,并且元素的该部分会被遮罩(即隐藏)。
- alpha 值为 1(即完全不透明)允许元素的该像素可见。
- 介于 0 和 1 之间的值(例如 0.5)允许像素可见,但具有一定的透明度级别。
因此,在这种方法中,给定点的遮罩值仅仅是遮罩图像该点的 alpha 通道的值,并且颜色通道不会影响遮罩值。
下面的示例是一个 alpha 遮罩,它仅包含黑色(alpha 值为 1)和透明区域(alpha 值为 0),您可以看到结果中某些部分完全可见,而其他部分完全透明

但在下面的示例中,我们使用的是具有不同透明度级别的渐变。结果不仅可见或透明,而且还有一些半透明区域
img {
mask-image: linear-gradient(black, transparent);
mask-mode: alpha;
}
以下是浏览器中的显示效果

亮度蒙版
在亮度蒙版中,颜色和 alpha 值都很重要。当 alpha 值为 0(即完全透明)时,元素会被隐藏;当 alpha 值为 1 时,蒙版值会根据该像素的颜色通道而变化。例如,当颜色为白色时,元素可见;在黑色区域的情况下,元素会被隐藏。
虽然计算 alpha 蒙版中的蒙版值仅基于蒙版图像的 alpha 值,但亮度蒙版的蒙版值则是根据亮度和 alpha 值计算得出的。浏览器通过以下步骤执行此操作:
- 根据颜色通道值计算亮度值。
- 将计算出的亮度值乘以相应的 alpha 值,以生成蒙版值。
/explanation 想要了解更多关于这些计算的信息,你可以查看 2019 年 9 月版编辑草案中 CSS 蒙版模块 1 规范 的 蒙版处理 部分。
下面是一个蒙版图像,中间有一个白色的太阳,周围是透明区域。正如你所看到的,白色区域是完全可见的。

在下一个示例中,使用彩色渐变作为蒙版图像,你可以看到在亮度模式下不同颜色对蒙版值的影响。

演示
在下面的演示中,我们使用了一个包含透明和黑色区域的蒙版图像。
下一个演示展示了一个使用渐变作为蒙版图像的亮度蒙版。
注意
mask-mode
属性会覆盖 mask-type
属性的定义。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
全部 | 全部 | 53+ | 全部 | 全部 | 全部 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 83+ | 全部 | 全部 | 全部 |
更多信息
相关属性
mask-clip
.element { mask-clip: padding-box; }
mask-image
.element { mask-image: url(star.svg); }
mask-origin
.element { mask-origin: content-box; }
mask-position
.element { mask-position: 20px center; }
mask-repeat
.element { mask-repeat: repeat-y; }
mask-size
.element { mask-size: 200px 100px; }
mask-type
.element { mask-type: alpha; }