mask-mode

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

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

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
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序per grammar

语法

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mask-mode
Experimental
Chrome No support NoEdge No support NoFirefox Full support 53IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 53Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.