面具模型 | mask-mode
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此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。
如果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 |
