Eigenschap mask-origin
De eigenschap mask-origin stelt het referentiepunt voor het positioneren van het masker in. Het bepaalt ten opzichte van welk deel van het element (rand, opvulling of inhoud) het masker wordt geplaatst.
Syntaxis
selector {
mask-origin: content-box | padding-box | border-box;
}
Waarden
| Waarde | Beschrijving |
|---|---|
border-box |
Het masker wordt gepositioneerd ten opzichte van de rand van het element (inclusief border). |
padding-box |
Het masker wordt gepositioneerd ten opzichte van het opvulgebied (standaard). |
content-box |
Het masker wordt gepositioneerd ten opzichte van de inhoud van het element. |
Voorbeeld . border-box
Het masker wordt gepositioneerd ten opzichte van de rand van het element:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
padding: 20px;
border: 30px dashed rgba(0,0,0,0.3);
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px;
mask-repeat: no-repeat;
mask-origin: border-box;
}
:
Voorbeeld . padding-box
Het masker wordt gepositioneerd ten opzichte van het opvulgebied:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
padding: 20px;
border: 30px dashed rgba(0,0,0,0.3);
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px;
mask-repeat: no-repeat;
mask-origin: padding-box;
}
:
Voorbeeld . content-box
Het masker wordt gepositioneerd ten opzichte van de inhoud:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
padding: 20px;
border: 30px dashed rgba(0,0,0,0.3);
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px;
mask-repeat: no-repeat;
mask-origin: content-box;
}
:
Zie ook
-
eigenschap
mask-clip,
bepaalt het afkappingsgebied van het masker -
eigenschap
mask-position,
stelt de positie van het masker in -
eigenschap
mask,
afkorting voor alle maskeringseigenschappen -
eigenschap
background-origin,
vergelijkbare eigenschap voor de achtergrond van het element