面具模型 | mask-mode
这是一种实验技术
由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
mask-modeCSS属性指示是否由mask-image被视为亮度或阿尔法遮罩。
/* 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;Initial value | match-source |
|---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
下面列出的一个或多个关键字值，以逗号分隔。
值
alpha此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。
luminance此关键字指示掩膜层图像的亮度值应用作掩码值。
match-source
如果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 */
}规格
Specification | Status | Comment |
|---|---|---|
CSS Masking Module Level 1The definition of 'mask-mode' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | No support | 53.0 (53.0) | No support | ? | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | No support | 53.0 (53.0) | No support | No support | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
