CSS/Eigenschaften/mask-mode

Browserunterstützung
caniuse.com

Die Eigenschaft mask-mode legt fest, wie Berechnung der Maskenfläche der referenzierte Schablone ausgeführt wird.

Erlaubte Werte

• alpha: In der Alphamaske wird nur der Wert des s berücksichtigt. RGB-Werte ohne Werte im Alphakanal erhalten einen Wert von 1.
• luminance: Die Maske wird in eine nicht sichtbare Ebene mit transparent-schwarzem Hintergrund projiziert. Die Farbwerte werden wie im Filter feColorMatrix mit der Einstellung luminance-to-alpha in Graustufen umgewandelt. Weiße Flächen sind undurchsichtig, schwarz ist vollständig transparent. Diese Farbwerte werden dann mit der Alphamaske kombiniert.
• mask-source: Wenn die <mask-reference> der Eigenschaft mask-image vom Typ <mask-source> ist, muss der durch mask-type des referenzierten Maskenelements angegebene Wert verwendet werden.
  Wenn die <mask-reference> der Eigenschaft mask-image vom Typ <image> ist, sollten die Alphawerte des Bildes der Maskenebene als Maskenwerte verwendet werden.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

<mask-source>

anwendbar auf

mask-Elemente

Vererbung

nein

animierbar

nein

Beispiel

  rect {
    mask-image: url(#SVGMask);
    mask-mode: luminance;
  }}

 

Beachten Sie: Für ältere Browserversionen wird noch der vendor-prefix -webkit- benötigt.

Siehe auch

• Masken und Beschneidungen/Masken
  • Unterschied CSS vs SVG

Weblinks

• Spezifikation (W3C): mask-mode property
• MDN: mask-mode property
• mask-mode (css-tricks.com)
  mit vielen Screenshots
• Details: caniuse.com