Maskenmodus - CSS-Tricks | CSS-Almanach 2025

Die mask-modeCSS-Eigenschaft gibt an, ob das CSS-Maskenebenenbild als Alpha-Maske oder als Luminanzmaske behandelt wird.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Syntax

mask-mode: alpha | luminance | match-source

Die Eigenschaft akzeptiert eine Schlüsselwort - Wert, oder eine kommagetrennte Liste von zwei oder alle drei der alpha, luminanceund mask-sourceWerten.

Ursprünglicher Wert: match-source
Gilt für: alle Elemente. In SVG gilt dies für Containerelemente mit Ausnahme des Elements, aller Grafikelemente.
Geerbt: nein
Berechneter Wert: wie angegeben
Animationstyp: diskret

Werte

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: Gibt an, dass die Alpha-Werte (Alpha-Kanal) des Maskenebenenbilds als Maskenwerte verwendet werden sollen.
luminance: Gibt an, dass die Luminanzwerte des Maskenbilds als Maskenwerte verwendet werden sollen.
match-source: Der Standardwert, der den Maskenmodus auf Alpha setzt, wenn die Maskenreferenz der mask-imageEigenschaft ein CSS- Element wie eine Bild-URL oder ein Farbverlauf ist. Wenn die Maskenreferenz der mask-imageEigenschaft jedoch ein SVG- Element ist, muss der Wert verwendet werden, der durch die Maskentyp-Eigenschaft des referenzierten Elements angegeben wird.
initial: Wendet die Standardeinstellung der Eigenschaft an match-source.
inherit: Übernimmt den Maskenmoduswert des übergeordneten Elements.
unset: Entfernt den aktuellen Maskenmodus aus dem Element.

Mehrere Werte verwenden

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskenmodi annehmen, und jeder Wert wird auf ein entsprechendes Maskenebenenbild angewendet, das in der Maskenbildeigenschaft angegeben ist.

Im folgenden Beispiel gibt der erste Wert den Maskenmodus an, der dem ersten Bild entspricht, den zweiten Wert für das zweite Bild usw.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Alpha- und Luminanzmasken

Das Maskieren in CSS wird mit zwei Methoden geliefert, die einige Unterschiede bei der Berechnung der Maskenwerte aufweisen.

Alpha-Masken

Bilder bestehen aus Pixeln. Jedes Pixel enthält einige Daten, die Farbwerte und möglicherweise Alpha-Werte mit Transparenzinformationen enthalten. Ein Bild mit einem Alphakanal kann eine Alphamaske sein , wie PNG-Bilder mit schwarzen und transparenten Bereichen.

In einer einfachen Maskierungsoperation haben wir ein Element und ein Maskenbild darüber platziert. Der Alpha-Wert jedes Pixels im Maskenbild wird mit dem entsprechenden Pixel im Element zusammengeführt.

Wenn der Alpha-Wert Null ist (dh transparent), gewinnt er und dieser Teil des Elements wird maskiert (dh ausgeblendet).
Ein Alpha-Wert von eins (dh vollständig undurchsichtig) ermöglicht, dass das Pixel des Elements sichtbar ist.
Ein Wert zwischen 0 und 1 (z. B. 0,5) ermöglicht es, dass das Pixel sichtbar ist, jedoch mit einem bestimmten Grad an Transparenz.

Bei diesem Verfahren ist der Maskenwert an einem bestimmten Punkt einfach der Wert des Alphakanals an diesem Punkt des Maskenbildes, und die Farbkanäle tragen nicht zum Maskenwert bei.

Das folgende Beispiel ist eine Alpha-Maske, die nur schwarze (Alpha-Wert von 1) und transparente Bereiche (Alpha-Wert von 0) enthält. Sie können das Ergebnis sehen, bei dem einige Teile vollständig sichtbar und andere vollständig transparent sind:

Verwenden eines PNG mit einem Alphakanal als Maskenbild

Im folgenden Beispiel verwenden wir jedoch einen Farbverlauf mit unterschiedlicher Transparenz. Das Ergebnis ist nicht nur sichtbar oder transparent, sondern es gibt auch einige durchscheinende Bereiche:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Und so sieht das Ergebnis im Browser aus:

Verwenden eines linearen Verlaufs als Maskenbild

Luminanzmasken

In einer Luminanzmaske spielen Farben und Alpha-Werte eine Rolle. Wenn der Alpha-Wert 0 ist (dh vollständig transparent), wird das Element ausgeblendet. Wenn der Alpha-Wert 1 ist, variieren die Maskenwerte in Abhängigkeit vom Farbkanal dieses Pixels. Wenn die Farbe beispielsweise weiß ist, ist das Element sichtbar. Im Falle eines schwarzen Bereichs ist das Element ausgeblendet.

Während die Berechnung der Maskenwerte in einer Alpha-Maske nur auf den Alpha-Werten des Maskenbildes basiert, werden die Maskenwerte einer Luminanzmaske aus den Luminanz- und Alpha-Werten berechnet. Browser tun dies in den folgenden Schritten:

Berechnen Sie einen Luminanzwert aus den Farbkanalwerten.
Multiplizieren Sie den berechneten Luminanzwert mit dem entsprechenden Alpha-Wert, um den Maskenwert zu erhalten.

/ Erläuterung Weitere Informationen zu diesen Berechnungen finden Sie im Abschnitt zur Maskenverarbeitung in der Spezifikation des CSS-Maskierungsmoduls 1 aus dem Entwurf des Herausgebers vom September 2019.

Unten ist ein Maskenbild mit einer weißen Sonne in der Mitte und transparenten Bereichen um ihn herum. Wie Sie sehen können, sind die while-Bereiche vollständig sichtbar:

Verwenden eines PNG-Bildes mit einem Alphakanal und weißen Bereichen als Maskenbild

Im nächsten Beispiel wird ein bunter Farbverlauf als Maskenbild verwendet, und Sie können die Auswirkung verschiedener Farben auf die Maskenwerte im Luminanzmodus sehen: