-webkit-mask-composite CSS property
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die Eigenschaft -webkit-mask-composite legt fest, auf welche Weise mehrere auf dasselbe Element angewendete Maskenbilder miteinander zusammengesetzt werden. Maskenbilder werden in der umgekehrten Reihenfolge zusammengesetzt, in der sie mit der Eigenschaft -webkit-mask-image deklariert sind.
Hinweis:
Es gibt eine standardisierte Eigenschaft mask-composite, die Teile dieser nicht standardmäßigen Eigenschaft mit anderen Schlüsselwörtern abdeckt.
Syntax
/* 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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
clear-
Überlappende Pixel im Quellmaskenbild und im Zielmaskenbild werden gelöscht.
copy-
Das Quellmaskenbild ersetzt das Zielmaskenbild.
source-over-
Das Quellmaskenbild wird über dem Zielmaskenbild gerendert.
source-in-
Überlappende Pixel im Quellmaskenbild und im Zielmaskenbild werden durch die Pixel des Quellmaskenbilds ersetzt; alle anderen Pixel werden gelöscht.
source-out-
Überlappende Pixel im Quellmaskenbild und im Zielmaskenbild werden gelöscht; alle verbleibenden Pixel des Quellmaskenbilds werden gerendert.
source-atop-
Die Pixel des Zielmaskenbilds werden gerendert. Die Pixel des Quellmaskenbilds werden nur gerendert, wenn sie einen nicht transparenten Bereich des Zielmaskenbilds überlappen. Dadurch hat das Quellmaskenbild keine Auswirkung.
destination-over-
Das Zielmaskenbild wird über dem Quellmaskenbild gerendert.
destination-in-
Überlappende Pixel im Quellmaskenbild und im Zielmaskenbild bleiben die Pixel des Zielmaskenbilds; alle anderen Pixel werden gelöscht.
destination-out-
Überlappende Pixel im Quellmaskenbild und im Zielmaskenbild werden gelöscht; alle verbleibenden Pixel des Quellmaskenbilds werden gerendert.
destination-atop-
Die Pixel des Quellmaskenbilds werden gerendert. Die Pixel des Zielmaskenbilds werden nur gerendert, wenn sie einen nicht transparenten Bereich des Quellmaskenbilds überlappen. Dadurch hat das Zielmaskenbild keine Auswirkung.
xor-
Überlappende Pixel im Quellmaskenbild und im Zielmaskenbild werden vollständig transparent, wenn beide vollständig deckend sind.
Formale Definition
| 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
.example {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-composite: xor, source-over;
}
Spezifikationen
Nicht Teil eines Standards. Diese Eigenschaft wird als mask-composite mit anderen Werten spezifiziert.