CSS mask-mode Eigenschaft

Definition und Verwendung

mask-mode Das Attribut bestimmt, ob das Maskierungsbild als Helligkeitsmaske oder Alpha-Maske betrachtet werden soll.

Machen Sie das Maskierungsbild als Helligkeitsmaske

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

mask-mode: match-source|luminance|alpha|initial|inherit;

Wert	Beschreibung
match-source	Wenn das Attribut mask-image ein Bild (Bild-URL oder Farbverlauf) ist, dann setzen Sie mask-mode auf alpha. Wenn das Attribut mask-image ein SVG <mask> ist, dann verwenden Sie das Attribut mask-type des <mask>-Elements. Das ist der Standardwert.
luminance	Verwenden Sie den Helligkeitswert des Maskierungsbildes als Maskierungswert.
alpha	Verwenden Sie den Alpha-Wert der Maskierungsbild als Maskierungswert.
initial	Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit	Diese Eigenschaft von ihrem übergeordneten Element erben. Siehe inherit.

Standardwert:	match-source
Vererbbarkeit:	Nein
Animationserstellung:	Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version:	CSS Masking Module Level 1
JavaScript-Syntax:	object.style.maskMode="alpha"

Die Zahlen in der Tabelle stellen die Versionen der Browser dar, die das erste Mal diese Eigenschaft vollständig unterstützen.

Chrome	Edge	Firefox	Safari	Oper
120	120	53	15.4	106