mask-mode

Avatar of Mojtaba Seyedi
Mojtaba Seyedi 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

mask-mode CSS 属性指示 CSS 遮罩层图像 是否被视为 alpha 遮罩或亮度遮罩。

.element {
  mask-image: url(sun.svg);
  mask-mode: alpha;
}

语法

mask-mode: alpha | luminance | match-source

该属性接受一个关键字值,或一个由两个或所有三个 alphaluminancemask-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),您可以看到结果中某些部分完全可见,而其他部分完全透明

Left column is Image of a sunset above a transparent image of a sun silhouette in black. Right column is the result of combining the two images where the black silhouette is now part of the sunset image.
使用具有 alpha 通道的 PNG 作为遮罩图像

但在下面的示例中,我们使用的是具有不同透明度级别的渐变。结果不仅可见或透明,而且还有一些半透明区域

img {
  mask-image: linear-gradient(black, transparent);
  mask-mode: alpha;
}

以下是浏览器中的显示效果

Left column is Image of a beach coastline above an image of a gradient that goes vertically from black at top to fully transparent at bottom. Right column is the result of combining the two images where the coastline seems to fade to white toward the bottom.
使用线性渐变作为遮罩图像

亮度蒙版

在亮度蒙版中,颜色和 alpha 值都很重要。当 alpha 值为 0(即完全透明)时,元素会被隐藏;当 alpha 值为 1 时,蒙版值会根据该像素的颜色通道而变化。例如,当颜色为白色时,元素可见;在黑色区域的情况下,元素会被隐藏。

虽然计算 alpha 蒙版中的蒙版值仅基于蒙版图像的 alpha 值,但亮度蒙版的蒙版值则是根据亮度和 alpha 值计算得出的。浏览器通过以下步骤执行此操作:

  1. 根据颜色通道值计算亮度值。
  2. 将计算出的亮度值乘以相应的 alpha 值,以生成蒙版值。

/explanation 想要了解更多关于这些计算的信息,你可以查看 2019 年 9 月版编辑草案中 CSS 蒙版模块 1 规范蒙版处理 部分。

下面是一个蒙版图像,中间有一个白色的太阳,周围是透明区域。正如你所看到的,白色区域是完全可见的。

Left column is Image of a sunset above a transparent image of a sun silhouette in white. Right column is the result of combining the two images where the white silhouette is now part of the sunset image.
使用带有 alpha 通道和白色区域的 PNG 图像作为蒙版图像。

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

Left column is Image of at the inside of a brightly colored cathedral with stained glass, above an image that contains 5 solid horizontal stripes including green, white, red, black and blue. Right column is the result of combining the two images where the cathedral is displayed with varying transparency as a result of being combined with the different colored striped.
使用彩色渐变作为蒙版图像。

演示

在下面的演示中,我们使用了一个包含透明和黑色区域的蒙版图像。

下一个演示展示了一个使用渐变作为蒙版图像的亮度蒙版。

注意

mask-mode 属性会覆盖 mask-type 属性的定义。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
全部全部53+全部全部全部
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部83+全部全部全部
来源:caniuse

更多信息