Eienskap mask-origin

Die eienskap mask-origin stel die verwysingspunt vir die posisionering van die masker. Dit bepaal relatief tot watter deel van die element (die grens, spasiering of inhoud) die masker geplaas sal word.

Sintaksis

selektor {
	mask-origin: content-box | padding-box | border-box;
}

Waardes

Waarde	Beskrywing
`border-box`	Masker word geposisioneer relatief tot die element se grens (insluitend border).
`padding-box`	Masker word geposisioneer relatief tot die spasieringsarea (padding-box) (standaard).
`content-box`	Masker word geposisioneer relatief tot die inhoud van die element.

Voorbeeld . border-box

Masker word geposisioneer relatief tot die element se grens:

<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

Masker word geposisioneer relatief tot die spasieringsarea:

<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

Masker word geposisioneer relatief tot die 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;
}

Sien ook

die eienskap mask-clip,
bepaal die afsnyarea van die masker
die eienskap mask-position,
stel die posisie van die masker
die eienskap mask,
afkorting vir alle maskeringseienskappe
die eienskap background-origin,
soortgelyke eienskap vir die agtergrond van die element