CSS/Eigenschaften/mask-size

Die Eigenschaft mask-size legt die Größe der Maskenfläche fest.

erlaubte Werte	auto, Voreinstellung übernimmt die Maße der Grafik, keine Skalierung contain, passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein cover, passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches ein Paar Längenangaben Die erste Angabe spezifiziert die gewünschte Breite, die zweite entsprechend die Höhe der Maske. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert. Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: auto
anwendbar auf	alle Elemente. In SVG, alle Elemente außer Definitionsabschnitte (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

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

 

Beachten Sie: Für die mask-size-Eigenschaft wird noch der vendor-prefix -webkit- benötigt.

Empfehlung: Die Werte entsprechen den Werte der background-size-Eigenschaft.

Weblinks

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

Siehe auch

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