Eigenschap mask-size
De eigenschap mask-size stelt de grootte van de maskerafbeelding in. Je kunt specifieke afmetingen in pixels/procenten instellen of de sleutelwoorden cover en contain gebruiken.
Syntaxis
selector {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Waarden
| Waarde | Beschrijving |
|---|---|
auto |
Originele grootte van de afbeelding (standaard). |
cover |
Schaalt de masker met behoud van verhoudingen om het element volledig te bedekken. |
contain |
Schaalt de masker met behoud van verhoudingen zodat deze volledig in het element past. |
100px 50px |
Specifieke afmetingen in pixels. |
50% 100% |
Afmetingen in procenten van de afmetingen van het element. |
Voorbeeld . Cover grootte
De masker wordt geschaald om het element volledig te bedekken:
<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;
}
:
Voorbeeld . Contain grootte
De masker wordt geschaald om volledig in het element te 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;
}
:
Voorbeeld . Vaste grootte in pixels
Masker met een grootte van 150×150 pixels:
<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;
}
:
Voorbeeld . Grootte in procenten
De masker neemt 80% van de breedte en 60% van de hoogte van het element in beslag:
<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;
}
:
Voorbeeld . Verschillende afmetingen per as
Masker 200px breed en 100px hoog:
<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;
}
:
Zie ook
-
eigenschap
mask-position,
bepaalt de positie van de masker -
eigenschap
mask-repeat,
bepaalt de herhaling van de masker -
eigenschap
mask,
afkorting voor alle maskeringseigenschappen
