mask-type

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

mask-type CSS 属性指示 SVG <mask> 元素是作为 alpha 遮罩还是亮度遮罩处理。

mask {
  mask-type: alpha;
}

当遮罩层是图像或渐变时,可以在 HTML 元素上设置 mask-mode 属性以指定遮罩类型。但是,如果使用 SVG <mask> 元素作为遮罩层,则可以在 <mask> 元素本身上设置 mask-typemask-mode 属性可以覆盖此偏好。

语法

mask-type: alpha | luminance

该属性接受 alpha 和亮度值的关键字值。

  • 初始值: luminance
  • 应用于: <mask> 元素
  • 继承:
  • 计算值: 绝对长度
  • 动画类型: 离散

/* Keyword values */
mask-type: alpha;
mask-type: luminance;

/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: unset;
  • luminance:默认值。遮罩的亮度值用于遮罩值。
  • alpha:遮罩的 alpha 值(alpha 通道)用于遮罩值。
  • initial:应用属性的默认值 luminance
  • inherit:采用父级的 mask-type 值。
  • unset:从元素中移除当前的 mask-type

alpha 遮罩和亮度遮罩

Alpha?亮度?值得研究一下这些术语,因为它们与 CSS 遮罩有关。

alpha 遮罩

图像由像素组成,每个像素包含颜色值。某些颜色值包含一个alpha 通道,用于设置颜色的透明度。具有 alpha 通道的图像可以是alpha 遮罩,例如具有透明区域的 PNG 图像。

在简单的遮罩操作中,我们有一个元素和一个放置在其顶部的遮罩图像。遮罩图像中每个像素的 alpha 值将与其在元素中对应的像素合并。

  • 如果 alpha 值为零(即透明),则它将胜出,并且元素的该部分将被遮罩(即隐藏)。
  • alpha 值为一(即完全不透明)将显示这些像素。
  • 0 到 1 之间的 alpha 值(例如 0.5)允许像素可见,但具有一定的透明度级别。

底线是,给定点的遮罩值是遮罩图像中该点的 alpha 通道的值。如果该点完全透明(即 alpha 值为 0),则它不会显示。反之亦然,完全不透明(即 alpha 值为 1)的情况下,该点将完全显示。

以下示例是仅包含黑色(即 alpha 值为 1)和透明区域(即 alpha 值为 0)的 alpha 遮罩。

亮度遮罩

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

我们看到,计算alpha 遮罩中的遮罩值仅基于遮罩图像的 alpha 值。另一方面,亮度遮罩的遮罩值是根据亮度和 alpha 值两者计算的。以下是浏览器做出反应的方式

  1. 首先,它根据颜色通道值计算亮度值。
  2. 然后,它将计算出的亮度值乘以相应的 alpha 值,以生成遮罩值。

查看 2019 年 9 月编辑草案的CSS 遮罩模块 1 规范,了解更多信息。

下面是与 alpha 遮罩相同的示例,但有一点不同:这次,我们在中心有一个完全不透明的白色区域(而不是黑色),周围环绕着透明区域。如您所见,白色区域与黑色 alpha 遮罩一样完全可见

示例

以下示例使用具有黑色和透明区域的遮罩元素

<div>Put a nice mask on me!</div>
<svg>
  <mask id="mask">
    <path fill="black" d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" />
  </mask>    
</svg>

使用元素的 ID(#mask),我们可以将遮罩放置在 <div> 元素上。

div {
  width: 100px;
  height: 100px;
  background-color: #134;
  mask-image: url(#mask);
}    

由于此蒙版具有黑色和透明区域,因此我们将mask-type设置为alpha

mask {
  mask-type: alpha; 
}

如果路径元素具有白色区域,则默认值luminance在此处也能完美地工作。

此示例在撰写本文时仅在 Firefox 中有效。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
79+35+24+6.1+15+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
81+7+59+
来源:caniuse

更多信息