Eigenschap mask-position
De eigenschap mask-position stelt de initiële positie van het masker ten opzichte van het element in.
Werkt vergelijkbaar met background-position, maar wordt toegepast op maskers.
Syntaxis
selector {
mask-position: <position>;
}
Waarden
| Waarde | Beschrijving |
|---|---|
top left |
In de linkerbovenhoek (standaard). |
center |
Gecentreerd op het element. |
50% 50% |
Hetzelfde als center. |
right bottom |
In de rechterbenedenhoek. |
100px 200px |
Specifieke coördinaten in pixels. |
Voorbeeld . Centreren van het masker
Hartmasker gecentreerd op de afbeelding:
<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 . Linkerbovenhoek
Masker in de linkerbovenhoek:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Voorbeeld . Rechterbenedenhoek
Masker in de rechterbenedenhoek:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Voorbeeld . Nauwkeurige coördinaten
Masker gepositioneerd op exacte coördinaten:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Voorbeeld . Positionering met percentages
Positioneren van het masker met percentages:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Zie ook
-
eigenschap
mask-size,
bepaalt de grootte van het masker -
eigenschap
mask-origin,
bepaalt het referentiepunt voor positionering -
eigenschap
mask,
afkorting voor alle maskeringseigenschappen
