掩模复合 | 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	?	?