mask-type

语法

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

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

值

alpha

指示应使用 <mask> 的 alpha（透明度）值。

luminance

指示应使用 <mask> 的亮度（明暗）值。

描述

mask-type 属性仅与 SVG <mask> 元素相关。如果设置 mask-type: luminance，遮罩将使用遮罩每个部分的亮度；如果设置 mask-type: alpha，它将使用遮罩每个部分的透明度或不透明度。

默认行为

默认情况下，SVG <mask> 元素使用 mask-type: luminance。这意味着遮罩内容的颜色和透明度都会影响遮罩。遮罩是否不透明部分取决于不透明区域颜色的亮度。

• 完全不透明的白色区域（100% 亮度）将被遮罩并可见。
• 黑色（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)）的亮度值为 35.77%。任何被实心 green 亮度遮罩遮罩的区域将有 35.77% 可见。如果 mask-type 设置为 alpha，相同的完全不透明 green 颜色将使被遮罩区域 100% 可见。

如果 SVG <mask> 元素具有 fill="rgb(0 0 0 / 0.5)"，这是一个 50% 透明的黑色，那么当 mask-type 设置为 alpha 时，被遮罩元素上的相应形状将以 50% 不透明度显示，因为 alpha 值为 0.5（50% 不透明度）。但如果 mask-type 默认为或设置为 luminance，被遮罩区域将完全裁剪且不可见，因为其亮度为 0。

mask-mode 对 mask-type 的影响

mask-type 属性在 SVG <mask> 元素上设置，而 mask-mode 属性在被遮罩的元素（你应用遮罩的元素）上设置。如果遮罩图像源不是 SVG <mask>，则此属性无效。

mask-mode 的默认值为 match-source，这意味着浏览器使用 <mask> 元素的 mask-type 值来确定如何解释它。如果 mask-mode 设置为 match-source 以外的值，则该值优先并覆盖所应用遮罩的 mask-type 值。

如果 <mask> 被定义为遮罩图像的源，并且 mask-mode 被设置为或默认为 match-source，则 mask-mode 将解析为 <mask> 元素的 mask-type 值：luminance 或 alpha。如果未明确设置，则默认值为 luminance。

正式定义

正式语法

mask-type = 
  luminance  |
  alpha      

示例

使用 mask-type 属性

此示例演示如何使用 mask-type 属性及其不同值的影响。

HTML

我们包含了两个将被遮罩的图像。除了类名，这两个图像是相同的。我们还包含了一个带有两个 <mask> 元素的 SVG。除了它们的 id 值，这两个遮罩也是相同的：每个都有一个绿色和白色的心形，以及一个半透明的白黑填充圆形。

<img
  class="alphaMaskType"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  class="luminanceMaskType"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

<svg height="0" width="0">
  <mask id="alphaMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
    <circle
      cx="170"
      cy="170"
      r="40"
      fill="rgb(0 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 0.5)"
      stroke-width="20" />
  </mask>
  <mask id="luminanceMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
    <circle
      cx="170"
      cy="170"
      r="40"
      fill="rgb(0 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 0.5)"
      stroke-width="20" />
  </mask>
</svg>

CSS

我们将 mask-type 属性应用于 <mask> 元素，然后将 <mask> 元素和遮罩源应用于图像。

mask#alphaMask {
  mask-type: alpha;
}

mask#luminanceMask {
  mask-type: luminance;
}

img.alphaMaskType {
  mask-image: url("#alphaMask");
}

img.luminanceMaskType {
  mask-image: url("#luminanceMask");
}

结果

由于 mask-mode 属性的默认值为 match-source，第一个遮罩仅使用 alpha 通道来定义遮罩：白色和绿色完全不透明，50% 的白色和黑色颜色是 50% 不透明的，因为只考虑颜色的 alpha 值。第二个示例使用颜色的亮度来确定遮罩的不透明度，其中白色比绿色亮，半透明的白色比半透明的黑色亮。

规范

浏览器兼容性

另见

• mask
• mask-mode
• CSS 遮罩简介
• CSS 遮罩模块
• SVG mask-type 属性