mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.

/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Multiple values */
mask-mode: alpha, match-source;
/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
					

句法

mask-mode property is specified as one or more of the keyword values listed below, separated by commas.

alpha

This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.

luminance

This keyword indicates that the luminance values of the mask layer image should be used as the mask values.

match-source

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.

形式定义

初始值 match-source
适用于 all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
继承 no
计算值 如指定
动画类型 discrete

形式句法

<masking-mode>#

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

范例

Using alpha mask mode

规范

规范 状态 注释
CSS Masking Module Level 1
The definition of 'mask-mode' in that specification.
候选推荐 初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
mask-mode Chrome 不支持 No Edge 不支持 No Firefox 完整支持 53 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 53 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

元数据

  • 最后修改: