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 */
}

结果

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-mode
alpha
luminance
match-source

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support