Mask-origin հատկություն

mask-origin հատկությունը սահմանում է դիմակի դիրքավորման հղման կետը: Այն որոշում է, թե տարրի որ մասի նկատմամբ (շրջանակ, բացվածքներ կամ բովանդակություն) կդիրքավորվի դիմակը:

Շարահյուսություն

ընտրիչ {
	mask-origin: content-box | padding-box | border-box;
}

Արժեքներ

Արժեք	Նկարագրություն
`border-box`	Դիմակը դիրքավորվում է տարրի շրջանակի նկատմամբ (ներառյալ border-ը):
`padding-box`	Դիմակը դիրքավորվում է padding տարածքի նկատմամբ (լռելայնով):
`content-box`	Դիմակը դիրքավորվում է տարրի բովանդակության նկատմամբ:

Օրինակ . border-box

Դիմակը դիրքավորվում է տարրի շրջանակի նկատմամբ:

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

Օրինակ . padding-box

Դիմակը դիրքավորվում է բացվածքների տարածքի նկատմամբ:

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

Օրինակ . content-box

Դիմակը դիրքավորվում է բովանդակության նկատմամբ:

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

Տես նաև

mask-clip հատկությունը,
սահմանում է դիմակի կտրման տարածքը
mask-position հատկությունը,
սահմանում է դիմակի դիրքը
mask հատկությունը,
դիմակավորման բոլոր հատկությունների համառոտ գրառում
background-origin հատկությունը,
նմանատիպ հատկություն տարրի ֆոնի համար