mask-mode - CSS（层叠样式表） 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

/* 关取值的键字 */
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
Animation type	discrete

语法

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

Values

alpha

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

luminance

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

match-source

If the mask-image property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.

If it is of type <image>, the alpha values of the mask layer image should be used as the mask values.

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

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

正式语法

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

示例

CSS

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

HTML

<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>

JavaScript

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

结果

规范

规范	状态	说明
CSS Masking Module Level 1 mask-mode	Candidate Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.