mask-type

Die CSS-Eigenschaft mask-type gibt an, ob das SVG-Element <mask> als Alphamask oder als Luminanzmaske behandelt wird.

mask {
  mask-type: alpha;
}

Wenn die Maskenebene ein Bild oder ein Gradient ist, kann auf dem HTML-Element eine mask-mode-Eigenschaft gesetzt werden, um den Maskierungstyp anzugeben. Wenn jedoch ein SVG-<mask>-Element als Maskenebene verwendet wird, kann mask-type auf dem <mask>-Element selbst gesetzt werden. Die mask-mode-Eigenschaft kann diese Präferenz überschreiben.

Syntax

mask-type: alpha | luminance

Die Eigenschaft akzeptiert einen Schlüsselwortwert der Werte Alpha und Luminanz.

• Anfangswert: luminance
• Gilt für: <mask>-Elemente
• Vererbt: nein
• Berechneter Wert: absolute Länge
• Animationstyp: diskret

Werte

/* Keyword values */
mask-type: alpha;
mask-type: luminance;

/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: unset;

• luminance: Der Standardwert. Die Luminanzwerte der Maske werden für die Maskenwerte verwendet.
• alpha: Die Alphawerte (Alphakanal) der Maske werden für die Maskenwerte verwendet.
• initial: Wendet den Standardwert der Eigenschaft an, luminance.
• inherit: Übernimmt den mask-type-Wert des übergeordneten Elements.
• unset: Entfernt den aktuellen mask-type vom Element.

Alpha- und Luminanzmasken

Alpha? Luminanz? Es lohnt sich, diese Begriffe im Zusammenhang mit CSS-Maskierungen zu betrachten.

Alphamasken

Bilder bestehen aus Pixeln, wobei jeder Pixel Farbwerte enthält. Und einige Farbwerte enthalten einen Alphakanal, um Transparenz für die Farbe einzustellen. Ein Bild mit einem Alphakanal kann eine Alphamaske sein, wie z. B. PNG-Bilder mit transparenten Bereichen.

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

• Wenn der Alpha-Wert Null ist (d. h. transparent), gewinnt er, und dieser Teil des Elements wird maskiert (d. h. ausgeblendet).
• Ein Alpha-Wert von Eins (d. h. vollständig undurchsichtig) zeigt diese Pixel an.
• Ein Alpha-Wert zwischen 0 und 1 (z. B. 0,5) lässt das Pixel sichtbar sein, jedoch mit einem bestimmten Grad an Transparenz.

Fazit: Der Maskenwert an einem bestimmten Punkt ist der Wert des Alphakanals an diesem Punkt des Maskenbildes. Wenn dieser Punkt vollständig transparent ist (d. h. Alpha-Wert von 0), wird er nicht angezeigt. Das Gegenteil gilt für einen vollständig undurchsichtigen Wert (d. h. Alpha-Wert von 1), wo dieser Punkt vollständig angezeigt wird.

Das untenstehende Beispiel ist eine Alphamaske, die nur schwarze (d. h. Alpha-Wert von 1) und transparente Bereiche (d. h. Alpha-Wert von 0) enthält.

Luminanzmasken

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

Wir haben gesehen, dass die Berechnung der Maskenwerte in einer Alphamaske nur auf den Alpha-Werten des Maskenbildes basiert. Auf der anderen Seite werden die Maskenwerte einer Luminanzmaske aus sowohl den Luminanz- als auch den Alpha-Werten berechnet. So reagiert der Browser:

1. Zuerst berechnet er einen Luminanzwert aus den Farbkanalwerten.
2. Dann multipliziert er diesen berechneten Luminanzwert mit dem entsprechenden Alpha-Wert, um den Maskenwert zu erzeugen.

Weitere Informationen finden Sie in der CSS Masking Module 1-Spezifikation vom September 2019 Editor’s Draft.

Unten ist dasselbe Beispiel, das wir für Alphamasken gesehen haben, aber mit einem Unterschied: Dieses Mal haben wir einen vollständig undurchsichtigen weißen Bereich in der Mitte (anstelle von Schwarz), der von transparenten Bereichen umgeben ist. Wie Sie sehen können, ist der weiße Bereich vollständig sichtbar, genau wie bei der schwarzen Alphamaske.

Beispiel

Das folgende Beispiel verwendet ein Maskenelement mit schwarzen und transparenten Bereichen.

<div>Put a nice mask on me!</div>
<svg>
  <mask id="mask">
    <path fill="black" d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" />
  </mask>    
</svg>

Mithilfe der Element-ID (#mask) können wir die Maske auf dem <div>-Element platzieren.

div {
  width: 100px;
  height: 100px;
  background-color: #134;
  mask-image: url(#mask);
}    

Da diese Maske schwarze und transparente Bereiche hat, setzen wir mask-type auf alpha.

mask {
  mask-type: alpha; 
}

Wenn das Pfadelement weiße Bereiche hätte, würde der Standardwert luminance hier stattdessen perfekt funktionieren.

Dieses Beispiel funktioniert zum Zeitpunkt der Erstellung nur in Firefox.

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	79+	35+	24+	6.1+	15+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Ja	Ja	81+	7+	59+

Weitere Informationen

Verwandte Eigenschaften