mask-mode

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

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 typediscrete

语法

下面列出 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 */
}

结果

规范

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

浏览器兼容性

BCD tables only load in the browser