mask-composite

Die CSS-Eigenschaft mask-composite ermöglicht uns die Kombination eines Maskenbildes mit den darunter liegenden Maskenbildern.

.element {
  mask-composite: subtract;
}

Wenn mehrere Maskenbilder vorhanden sind, müssen diese zu einem einzigen endgültigen Maskenbild zusammengefügt werden. mask-composite legt fest, wie Maskenbilder mit unterschiedlichen Formen zu einem einzigen Bild kombiniert werden. Stellen Sie sich das wie das Kombinieren von Ebenen in einer Bildbearbeitungsanwendung wie Photoshop, Figma oder Sketch vor, bei der Sie Steuerelemente haben, die festlegen, wie die Ebenen kombiniert werden.

Oder anders ausgedrückt:

Syntax

mask-composite: <compositing-operator>#
where
<compositing-operator> = add | subtract | intersect | exclude

• Initial: add
• Gilt für: Alle Elemente. In SVG gilt es für Container-Elemente ohne das Element <defs> und alle Grafikelemente
• Vererbt: nein
• Berechneter Wert: wie angegeben
• Animationstyp: diskret

Werte

/* 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;

Für die Komposition ist das Maskenbild, auf das der mask-composite-Wert angewendet wird, die Quelle, während alle darunter liegenden Maskenbilder das Ziel sind.

• add: Der Standardwert. Das Maskenbild, das dem Benutzer am nächsten liegt (Quelle), wird über das nächste Maskenbild (Ziel) gelegt. Die Kombination ist das endgültige Maskenbild.
• subtract: Das Maskenbild, das dem Benutzer am nächsten liegt, wird dort platziert, wo es außerhalb des nächsten Maskenbildes liegt. Mit anderen Worten, die endgültige Kombination sind die Teile des Ziels, die nicht mit der Quelle überlappen.
• intersect: Die Teile der Quelle, die mit dem Ziel überlappen, ersetzen das Ziel. Mit anderen Worten, die endgültige Kombination sind die Teile des Ziels, die mit der Quelle überlappen.
• exclude: Die nicht überlappenden Bereiche von Quelle und Ziel werden kombiniert.
• initial: Wendet den Standardwert der Eigenschaft an, add.
• inherit: Übernimmt den mask-composite-Wert des Elternteils.
• unset: Entfernt die aktuelle mask-composite-Eigenschaft vom Element.

Beispiel

Im folgenden Beispiel werden zwei Maskenbilder mit dem Wert exclude kombiniert

img {
  mask-image: url(circle.svg), url(plus.svg);
  mask-size: 150px, 200px;
  mask-position: center;
  mask-composite: exclude;
}

Zum Zeitpunkt der Erstellung funktioniert dieses Beispiel nur in Firefox.

Verwendung mehrerer Werte

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für die Maskenkomposition annehmen, und die Anzahl der Werte ist um eins geringer als die Anzahl der Maskenbilder, die mit mask-image angegeben werden.

Im folgenden Beispiel

• spezifiziert der erste Wert die Kompositionsoperation des zweiten Bildes mit dem dritten, und
• der zweite Wert wird verwendet, um die Kompositionsoperation des ersten Maskenbildes mit dem Ergebnis der ersten Operation durchzuführen.

Und so weiter für eine beliebige Anzahl von Maskenbildern. Denken Sie daran, dass das erste angegebene Bild über den danach angegebenen platziert wird.

.element {
  mask-image: url(circle.png), url(star.png), url(square.png);
  mask-composite: exclude, subtract;
}

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	Keine *	53+	Nein	Nein	Nein

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Nein	87+	Nein	Nein	Nein

* Edge 18 unterstützte mask-composite, bevor es die Blink-Rendering-Engine übernahm.

Weitere Informationen

Verwandt