Mask-origin hossasy

mask-origin hossasy maskanyň ýerleşişi üçin başlangyç nokadyny kesgitleýär. Ol element haýsy bölegine (çägine, doldurma ýa-da mazmuny) görä maskanyň ýerleşdiriljekdigini kesgitleýär.

Sintaksis

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

Görnüşleri

Görnüşi	Düşündiriş
`border-box`	Maska element çägine (border bilen bilelikde) görä ýerleşdirilýär.
`padding-box`	Maska doldurma (padding) meýdanyna görä ýerleşdirilýär (deslapky ýagdaýy).
`content-box`	Maska element mazmunyna görä ýerleşdirilýär.

Mysal . border-box

Maska element çägine görä ýerleşdirilýär:

<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;
}

Mysal . padding-box

Maska doldurma meýdanyna görä ýerleşdirilýär:

<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;
}

Mysal . content-box

Maska mazmuna görä ýerleşdirilýär:

<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;
}

Şeýle-de garaň

mask-clip hossasy,
maskanyň kesip alynýan meýdanyny kesgitleýär
mask-position hossasy,
maskanyň ýagdaýy kesgitleýär
mask hossasy,
maskalaýyş hossalary üçin gysga görnüş
background-origin hossasy,
element fon üçin şuňa meňzeş hossa