CSS/Eigenschaften/mask-image

Browserunterstützung
caniuse.com

Die Eigenschaft mask-image legt eine Grafik als Maskenfläche fest

Erlaubte Werte

• none
• url(): referenziert ein Bild oder eine CSS-Grafik
• image-set()

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

img {
  width: 150px;
   mask-image: linear-gradient(transparent, white);
}

Als Schablone wird mit der url()-Funktion ein Verlauf erzeugt, der über das Element gelegt wird.

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

Siehe auch

• Masken und Beschneidungen/Masken
  • mask-image

Weblinks

• Spezifikation (W3C): mask-image property
• MDN: mask-image
• Details: caniuse.com