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