CSS/Eigenschaften/mask-size
Aus SELFHTML-Wiki
< CSS | Eigenschaften(Weitergeleitet von Mask-size)
Die Eigenschaft mask-size legt die Größe der Maskenfläche fest
Der Wert
- 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
undrevert
- 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;
}
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
Weblinks
- Spezifikation (W3C): mask property
- MDN: mask-size
- Details: caniuse.com
Liste der CSS-Eigenschaften
- Positionierung und Anzeige
- Abstände
- Benutzeroberfläche
- Container
- generierter Inhalt
- Größenangaben
- Box-Ausrichtung
- Flexbox Layout
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Scroll Snap
- Rahmen und Schatten
- Schriftformatierung
- Textformatierung
- Textausrichtung
- Umbruchsteuerung
- Transformationen
- Animationen