Eigenschaft mask-size
Die Eigenschaft mask-size legt die Größe des Maskenbildes fest. Es können konkrete Größen in Pixeln/Prozenten angegeben werden oder die Schlüsselwörter cover und contain verwendet werden.
Syntax
Selektor {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Werte
| Wert | Beschreibung |
|---|---|
auto |
Originalgröße des Bildes (Standard). |
cover |
Skaliert die Maske unter Beibehaltung der Proportionen, um das Element vollständig abzudecken. |
contain |
Skaliert die Maske unter Beibehaltung der Proportionen, um vollständig in das Element zu passen. |
100px 50px |
Konkrete Größen in Pixeln. |
50% 100% |
Größen in Prozent der Elementabmessungen. |
Beispiel . Cover-Größe
Die Maske wird skaliert, um das Element vollständig abzudecken:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Beispiel . Contain-Größe
Die Maske wird skaliert, um vollständig in das Element zu passen:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Beispiel . Feste Größe in Pixeln
Maske mit einer Größe von 150×150 Pixeln:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Beispiel . Größe in Prozent
Die Maske nimmt 80% der Breite und 60% der Höhe des Elements ein:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Beispiel . Unterschiedliche Größen für die Achsen
Maske mit 200px Breite und 100px Höhe:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Siehe auch
-
Eigenschaft
mask-position,
legt die Position der Maske fest -
Eigenschaft
mask-repeat,
legt die Wiederholung der Maske fest -
Eigenschaft
mask,
Kurzschreibweise für alle Maskierungseigenschaften
