CSS/Eigenschaften/mask

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Die Eigenschaft mask erlaubt es, nur Teile eines Elements darzustellen, indem eine Maske über das Element gelegt wird
Erlaubte Werte
  • URI: referenziert Maske
  • none:
  • inherit: erbt den mask-Wert des Elternelements
Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel
.radial { 
	--mask: radial-gradient( black 40%, transparent 70%)

	-webkit-mask: var(--mask);
	mask: var(--mask);
}
Über das Element mit der Klasse .radial wird eine Maske gelegt, die aus einem kreisförmigen Verlauf besteht und das Bild entsprechend verdeckt. Nur die Stellen mit einem schwarzen Alpakanal lassen die Grafik durchscheinen.
Empfehlung: Die mask-Eigenschaft ist noch nicht in alle Browser implementiert. Verwenden Sie custom properties, um den Wert nur einmal festzulegen und dann in den zweiten Regelsatz mit Browserpräfix einzusetzen.

Siehe auch

Weblinks