CSS/Eigenschaften/mask-size

Browserunterstützung
caniuse.com

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

Standardwert

auto

anwendbar auf

alle Elemente. In SVG, alle Elemente außer Definitionsabschnitte

Vererbung

nein

animierbar

nein

Beispiel

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

Der Wert cover sorgt dafür, dass sich die Maskenschablone über das gesamte Bild legt.

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

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

Siehe auch

• Masken und Beschneidungen/Masken
  • mask-size

Weblinks

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