CSS/Eigenschaften/mask-image

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

erlaubte Werte	none URI: referenziert ein Bild oder eine CSS-Grafik Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: none
anwendbar auf	alle Elemente (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
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 die mask-image-Eigenschaft wird noch der vendor-prefix -webkit- benötigt.

Weblinks

• Spezifikation (W3C): mask-image property
• MDN: mask-image

Siehe auch

• CSS/Tutorials/Masken und Beschneidungen/Masken
  • mask-image