mask-mode

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

mask-modeCSS属性指示由mask-image 指向的遮罩被视为亮度或阿尔法遮罩。

css

/* 关取值的键字 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* 多个类型的值 */
mask-mode: alpha, match-source;

/* 全局变量的值 */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;

初始值	`match-source`
适用元素	all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
是否是继承属性	否
计算值	as specified
动画类型	离散值

语法

下面列出 mask-mode 的一个或多个关键字值，以逗号分隔。

Values

alpha

此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。

luminance

此关键字指示掩膜层图像的亮度值应用作掩码值。

match-source

如果mask-image属性是<mask-source>类型，掩模层图像的亮度值会被作为掩模值。

如果它是类型<image>，掩码层图像的 alpha 值应用作掩码值。

形式语法

mask-mode = 
  <masking-mode>#  

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

示例

CSS

css

#masked {
  width: 227px;
  height: 200px;
  background: blue linear-gradient(red, blue);
  mask-image: url(mdn.svg);
  mask-mode: alpha; /* Can be changed in the live sample */
}

<div id="masked"></div>
<select id="maskMode">
  <option value="alpha">alpha</option>
  <option value="luminance">luminance</option>
  <option value="match-source">match-source</option>
</select>

var maskMode = document.getElementById("maskMode");
maskMode.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskMode = evt.target.value;
});

结果

规范

Specification
CSS Masking Module Level 1 # the-mask-mode

浏览器兼容性

BCD tables only load in the browser