-webkit-mask-composite

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die -webkit-mask-composite Eigenschaft legt fest, wie mehrere auf dasselbe Element angewendete Maskenbilder miteinander kombiniert werden. Maskenbilder werden in der umgekehrten Reihenfolge zusammengesetzt, in der sie mit der -webkit-mask-image Eigenschaft deklariert wurden.

Hinweis: Es gibt eine standardisierte mask-composite Eigenschaft, die Teile dieser nicht standardisierten Eigenschaft mit unterschiedlichen Schlüsselwörtern abdeckt.

Syntax

css

/* Keyword values */
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

/* Global values */
-webkit-mask-composite: inherit;
-webkit-mask-composite: initial;
-webkit-mask-composite: revert;
-webkit-mask-composite: revert-layer;
-webkit-mask-composite: unset;

Werte

clear: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden gelöscht.
copy: Das Quell-Maskenbild ersetzt das Ziel-Maskenbild.
source-over: Das Quell-Maskenbild wird über das Ziel-Maskenbild gerendert.
source-in: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden durch die Pixel des Quell-Maskenbildes ersetzt; alle anderen Pixel werden gelöscht.
source-out: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden gelöscht; alle verbleibenden Pixel des Quell-Maskenbildes werden gerendert.
source-atop: Die Pixel des Ziel-Maskenbildes werden gerendert. Die Pixel des Quell-Maskenbildes werden nur gerendert, wenn sie einen nicht transparenten Teil des Ziel-Maskenbildes überlappen. Dies bewirkt, dass das Quell-Maskenbild keinen Effekt hat.
destination-over: Das Ziel-Maskenbild wird über das Quell-Maskenbild gerendert.
destination-in: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild bleiben die Pixel des Ziel-Maskenbildes; alle anderen Pixel werden gelöscht.
destination-out: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden gelöscht; alle verbleibenden Pixel des Quell-Maskenbildes werden gerendert.
destination-atop: Die Pixel des Quell-Maskenbildes werden gerendert. Die Pixel des Ziel-Maskenbildes werden nur gerendert, wenn sie einen nicht transparenten Teil des Ziel-Maskenbildes überlappen. Dies bewirkt, dass das Ziel-Maskenbild keinen Effekt hat.
xor: Überlappende Pixel im Quell-Maskenbild und im Ziel-Maskenbild werden vollständig transparent, wenn sie beide vollständig undurchsichtig sind.

Formaldefinition

Anfangswert	`source-over`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

-webkit-mask-composite = 
  <composite-style>#

Beispiele

Zusammensetzen mit XOR

css

.example {
  -webkit-mask-image: url(mask1.png), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}

mask-composite