掩模复合 | mask-composite
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源位于目标上方。
形式语法
<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 | ? | ? |
