mask-mode

语法

/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* Multiple values */
mask-mode: alpha, match-source;

/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;

值

mask-mode 属性可以采用多个逗号分隔的 <masking-mode> 关键字值，包括：

alpha

指示应使用遮罩图像的 Alpha（透明度）值。

luminance

指示应使用遮罩图像的亮度（明度）值。

match-source

指示遮罩的类型由源决定。这是默认属性值。

• 如果 mask-image 引用 SVG <mask>，则使用其 mask-type 属性值，或者，如果存在，则使用其 mask-type 属性。如果两者都没有明确设置，则此值默认为 luminance。
• 如果遮罩图像源是 <image> 或 <gradient>，则使用遮罩图像的 alpha 值。

描述

遮罩将其透明度，以及根据遮罩类型，其亮度，传递给被遮罩的元素。如果遮罩是 <image> 类型，默认情况下，遮罩图像的 Alpha 值决定被遮罩元素每个部分的可见性：遮罩不透明的地方，被遮罩元素的相应部分可见；遮罩半透明的地方，元素也半透明，这些区域的元素被隐藏。当 mask-mode 属性设置为或默认为 match-source 时，这是 <image> 遮罩的默认行为，并且当 mask-mode 明确设置为 alpha 时始终如此。

了解亮度

对于 luminance 遮罩，被遮罩元素的可见性取决于遮罩的不透明度和不透明区域颜色的亮度。白色（100% 亮度）不透明区域（alpha = 1）将被遮罩并可见，黑色区域（0% 亮度）透明（alpha = 0）将被裁剪。介于白色和黑色之间且具有部分不透明度的颜色区域将部分被遮罩，反映构成遮罩的每种颜色的亮度和 Alpha 透明度。

luminance 遮罩的不透明度由 rgb() 颜色的 R、G、B 和 A 值使用以下公式确定：

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

例如，颜色 green 是 #008000 或 rgb(0% 50% 0% / 1)。在 luminance 遮罩中，任何被纯 green 遮罩遮罩的区域将是 35.77% 不透明。如果此遮罩的 mask-mode 设置为 alpha，由于 green 是完全不透明的颜色，因此被遮罩区域将是 100% 不透明。

多个值

每个 mask-mode 值是一个逗号分隔的值列表。当存在多个值时，每个值对应于 mask-image 属性中相同位置的遮罩层。这些值定义了关联的遮罩图像是被视为 luminance 遮罩还是 alpha 遮罩。

了解 match-source

对于 match-source，使用 luminance 还是 alpha 取决于遮罩源的遮罩模式。如果 mask-image 属性值是对 SVG <mask> 元素的引用，则使用 <mask> 元素的 mask-type 属性值。如果 <mask> 元素上没有设置 CSS mask-type 属性，则使用 <mask> 元素的 mask-type 属性值（如果存在且受支持）。如果两者都没有明确设置，则此值默认为 luminance；但仅限于 <mask> 元素作为遮罩源的情况。否则，如前所述，如果遮罩图像源是 <image> 而不是 SVG <mask>，则使用遮罩层图像的 alpha 值。

正式定义

正式语法

mask-mode = 
  <masking-mode>#  

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

示例

用法和值

此示例演示了 mask-mode 属性的基本用法和不同值。

HTML

我们包含三个 <div> 元素，以便我们可以演示三个枚举的 mask-mode 关键字值。

<div class="alpha">ALPHA</div>
<div class="luminance">LUMINANCE</div>
<div class="matchSource">MATCH-SOURCE</div>

CSS

每个 <div> 都提供相同的背景和遮罩图像。每个 <div> 之间唯一的区别是 mask-mode 属性的值。

div {
  background: blue linear-gradient(red, blue);
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
}

.alpha {
  mask-mode: alpha;
}

.luminance {
  mask-mode: luminance;
}

.matchSource {
  mask-mode: match-source;
}

div {
  width: 227px;
  height: 200px;
  float: left;
  text-align: center;
  line-height: 65px;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-family: sans-serif;
}

结果

由于遮罩源是 <image> 而不是 SVG <mask>，因此 match-source 值解析为 alpha。

规范

浏览器兼容性

另见

• mask-type
• mask-image
• mask 简写
• CSS 遮罩简介
• CSS mask 属性
• 声明多个蒙版
• CSS 遮罩模块