CSS/Eigenschaften/mask-size

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch