Хосияти mask-composite

Хосияти mask-composite имкон медиҳад, ки чанд маскеро, ки ба як унсур татбиқ карда мешаванд, комбинатсия кунед. Ин муайян мекунад, ки чанд маски гуногун чӣ гуна бо ҳам муомила мекунанд, вақте ки онҳо бар ҳам гузошта мешаванд.

Синтаксис

интихобкунанда {
	mask-composite: <compositing-operator>#;
}

Қиматҳо

Қимат	Тавсиф
`add`	Натиҷа - муттаҳид кардани ҳамаи маскҳо (ба таври пешфарз).
`subtract`	Маски дуюм аз маски якум хориҷ карда мешавад.
`intersect`	Фақат минтақаи буриши маскҳо намоиш дода мешавад.
`exclude`	Минтақаҳое намоиш дода мешаванд, ки барои маскҳо умумӣ нестанд.

Намуна . Ҳолати add

Муттаҳид кардани ду маск (дилча ва тир):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		200px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: add;
}

Намуна . Ҳолати subtract

Хориҷ кардани тир аз дилча:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		170px 80px;
	mask-size: 
		250px,
		120px;
	mask-repeat: no-repeat;
	mask-composite: subtract;
}

Намуна . Ҳолати intersect

Намоиши фақат минтақаи буриши маскҳо:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		50px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: intersect;
}

Намуна . Ҳолати exclude

Намоиши минтақаҳое, ки умумӣ нестанд:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		50px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: exclude;
}

Намуна . Комбинатсия бо градиентҳо

Истифода бо маскҳои градиентӣ:

<div id="gradient-box"></div>

#gradient-box {
	width: 400px;
	height: 400px;
	background: linear-gradient(45deg, red, yellow, green, blue);
	mask-image: 
		radial-gradient(circle at 30% 30%, black 40%, transparent 70%),
		radial-gradient(circle at 70% 70%, black 40%, transparent 70%);
	mask-composite: exclude;
}

Инчунин бубинед

хосияти mask-image,
тасвирҳоро барои маскҳо муқаррар мекунад
хосияти mask,
ихтисор барои ҳамаи хосиятҳои маскгузорӣ
хосияти mask-mode,
ҳолати гузоштани маскро муайян мекунад
хосияти mix-blend-mode,
ҳолати гузоштани унсурҳоро муайян мекунад