mask-mode

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die mask-mode CSS Eigenschaft legt fest, ob die durch mask-image definierte Maske als Luminanz- oder Alphamaske behandelt wird.

Syntax

css
/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* Multiple values */
mask-mode: alpha, match-source;

/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;

Die Eigenschaft mask-mode wird als eines oder mehrere der unten aufgeführten Schlüsselwortwerte angegeben, getrennt durch Kommas.

Werte

alpha

Dieses Schlüsselwort gibt an, dass die Transparenzwerte (Alpha-Kanal) des Maskenbildelements als Maskenwerte verwendet werden sollen.

luminance

Dieses Schlüsselwort gibt an, dass die Luminanzwerte des Maskenbildelements als Maskenwerte verwendet werden sollen.

match-source

Wenn die Eigenschaft mask-image vom Typ <mask-source> ist, sollten die Luminanzwerte des Maskenbildelements als Maskenwerte verwendet werden.

Wenn sie vom Typ <image> ist, sollten die Alphawerte des Maskenbildelements als Maskenwerte verwendet werden.

Formale Definition

Initialer Wertmatch-source
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

mask-mode = 
  <masking-mode>#  

<masking-mode> = 
  alpha         |
  luminance     |
  match-source

Beispiele

Verwendung des Alpha-Maskenmodus

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask-mode

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch