掩模复合 | mask-composite
这是一种实验技术
由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
mask-compositeCSS属性表示在当前掩码层上使用的复合操作，掩码层在其下面。
/* 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 | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
