CSS参考手册
面具 | Masking
面具模型 | mask-mode
这是一种实验技术
由于本技术规范未稳定,请检查各种浏览器使用的兼容性表。还要注意,随着规范的改变,实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
mask-mode
CSS属性指示是否由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 |
面具 | Masking相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。