CSS参考手册
面具 | Masking
掩模复合 | mask-composite
这是一种实验技术
由于本技术规范未稳定,请检查各种浏览器使用的兼容性表。还要注意,随着规范的改变,实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
mask-composite
CSS属性表示在当前掩码层上使用的复合操作,掩码层在其下面。
/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;
/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: unset;
Initial value |
add |
---|---|
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 |
语法
下面列出的一个或多个关键字值,以逗号分隔。
值
对于组合,当前掩码层称为 source 来源,而它下面的所有层都被称为 destination目的地...
add
源位于目标上方。
subtract
源被放置在位于目的地之外的位置。
intersect
与目标重叠的源部分,替换目标。
exclude
将不重叠的源区和目的区组合在一起。
形式语法
<compositing-operator>#where
<compositing-operator> = add | subtract | intersect | exclude
例子
CSS
#masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-size: 100% 100%;
mask-composite: add; /* Can be changed in the live sample */
}
规格
Specification |
Status |
Comment |
---|---|---|
CSS Masking Module Level 1The definition of 'mask-composite' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
No support1 |
53.0 (53.0) |
No support |
No support1 |
No support1 |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|
Basic support |
? |
53.0 (53.0) |
No support |
? |
? |
面具 | Masking相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。