Mask-mode | CSS-Tricks

CSS Almanac → Properties → M → mask-mode

Mojtaba Seyedi am 10. Mai 2021

Die CSS-Eigenschaft mask-mode gibt an, ob das CSS- Maskierungs-Layer-Bild als Alphamask oder als Luminanzmaske behandelt wird.

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

Syntax

mask-mode: alpha | luminance | match-source

Die Eigenschaft akzeptiert einen Schlüsselwortwert oder eine durch Kommas getrennte Liste von zwei oder allen drei der Werte alpha, luminance und mask-source.

Anfangswert: match-source
Gilt für: alle Elemente. In SVG gilt es für Containerelemente, mit Ausnahme des Elements, und für alle Grafikelemente.
Vererbt: 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 Alphawerte (Alpha-Kanal) des Maskierungs-Layer-Bildes als Maskenwerte verwendet werden sollen.
luminance: gibt an, dass die Luminanzwerte des Maskierungsbildes als Maskenwerte verwendet werden sollen.
match-source: der Standardwert, der den Maskierungsmodus auf Alpha setzt, wenn die Maskierungsreferenz der mask-image-Eigenschaft ein CSS- <image> Element ist, wie eine Bild-URL oder ein Gradient. Wenn die Maskierungsreferenz der mask-image-Eigenschaft jedoch ein SVG- <mask> Element ist, muss der im mask-type-Eigenschaft des referenzierten <mask>-Elements angegebene Wert verwendet werden.
initial: wendet die Standardeinstellung der Eigenschaft an, die match-source ist.
inherit: übernimmt den mask-mode-Wert des Elternteils.
unset: entfernt den aktuellen mask-mode vom Element.

Verwendung mehrerer Werte

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskierungsmodi aufnehmen, und jeder Wert wird auf ein entsprechendes Maskierungs-Layer-Bild angewendet, das in der Eigenschaft mask-image angegeben ist.

Im folgenden Beispiel gibt der erste Wert den Maskierungsmodus für das erste Bild an, der zweite Wert für das zweite Bild und so weiter.

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

Alpha- und Luminanzmasken

Maskierung in CSS bietet zwei Methoden, die einige Unterschiede bei der Berechnung der Maskenwerte aufweisen.

Alphamasken

Bilder bestehen aus Pixeln, jeder Pixel enthält Daten mit Farbwerten und möglicherweise Alphawerten mit Transparenzinformationen. Ein Bild mit einem Alpha-Kanal kann eine Alphamaskierung sein, wie z. B. PNG-Bilder mit schwarzen und transparenten Bereichen.

Bei einer einfachen Maskierungsoperation haben wir ein Element und ein darüber liegendes Maskierungsbild. Der Alpha-Wert jedes Pixels im Maskierungsbild wird mit seinem entsprechenden Pixel im Element zusammengeführt.

Wenn der Alpha-Wert Null ist (d. h. transparent), setzt er sich durch, und dieser Teil des Elements wird maskiert (d. h. verborgen).
Ein Alpha-Wert von Eins (d. h. vollständig opak) lässt diesen Pixel des Elements sichtbar erscheinen.
Ein Wert zwischen 0 und 1 (z. B. 0,5) lässt den Pixel sichtbar, aber mit einem gewissen Grad an Transparenz erscheinen.

Daher ist in dieser Methode der Maskenwert an einem bestimmten Punkt einfach der Wert des Alpha-Kanals an diesem Punkt des Maskierungsbildes, und die Farbkanäle tragen nicht zum Maskenwert bei.

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

Left column is Image of a sunset above a transparent image of a sun silhouette in black. Right column is the result of combining the two images where the black silhouette is now part of the sunset image. — Verwendung eines PNG mit einem Alpha-Kanal als Maskierungsbild

Aber im folgenden Beispiel verwenden wir einen Gradienten, der unterschiedliche Transparenzgrade aufweist. Das Ergebnis ist nicht nur sichtbar oder transparent, sondern es gibt einige durchscheinende Bereiche.

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

Und so sieht das Ergebnis im Browser aus

Left column is Image of a beach coastline above an image of a gradient that goes vertically from black at top to fully transparent at bottom. Right column is the result of combining the two images where the coastline seems to fade to white toward the bottom. — Verwendung eines linearen Gradienten als Maskierungsbild

Luminanzmasken

Bei einer Luminanzmaske spielen Farben und Alphawerte eine Rolle. Wenn der Alpha-Wert 0 ist (d. h. vollständig transparent), ist das Element verborgen; wenn der Alpha-Wert 1 ist, variieren die Maskenwerte je nach Farbkanal des Pixels. Wenn die Farbe beispielsweise weiß ist, ist das Element sichtbar; im Falle eines schwarzen Bereichs ist das Element verborgen.

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

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

/explanation Weitere Informationen zu diesen Berechnungen finden Sie im Abschnitt Maskenverarbeitung in der CSS Masking Module 1-Spezifikation aus dem Editor's Draft vom September 2019.

Unten ist ein Maskierungsbild mit einer weißen Sonne in der Mitte und transparenten Bereichen drumherum. Wie Sie sehen können, sind die weißen Bereiche vollständig sichtbar.

Left column is Image of a sunset above a transparent image of a sun silhouette in white. Right column is the result of combining the two images where the white silhouette is now part of the sunset image. — Verwendung eines PNG-Bildes mit einem Alpha-Kanal und weißen Bereichen als Maskierungsbild

Und im nächsten Beispiel wird ein bunter Gradient als Maskierungsbild verwendet, und Sie können die Auswirkung verschiedener Farben auf die Maskenwerte im Luminanzmodus sehen.