Sifa ya mask-composite

Sifa mask-composite inaruhusu kuchanganya maski nyingi zinazotumika kwa kipengele kimoja. Inabainisha jinsi maski tofauti zitakavyoshirikiana wakati zimewekwa juu.

Kiambishi

kichaguzi {
	mask-composite: <compositing-operator>#;
}

Thamani

Thamani	Maelezo
`add`	Matokeo - muunganiko wa maski zote (msingi).
`subtract`	Maski ya pili inatolewa kutoka kwa ya kwanza.
`intersect`	Eneo la makutano la maski pekee ndilo linaonyeshwa.
`exclude`	Maeneo yasiyo ya kawaida kwa maski ndiyo yanaonyeshwa.

Mfano . Hali ya add

Kuunganisha maski mbili (moyo na mshale):

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

#picha {
	upana: 500px;
	urefu: 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;
}

Mfano . Hali ya subtract

Kutoa mshale kutoka kwa moyo:

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

#picha {
	upana: 500px;
	urefu: 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;
}

Mfano . Hali ya intersect

Kuonyesha eneo la makutano la maski pekee:

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

#picha {
	upana: 500px;
	urefu: 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;
}

Mfano . Hali ya exclude

Kuonyesha maeneo yasiyo ya kawaida:

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

#picha {
	upana: 500px;
	urefu: 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;
}

Mfano . Mchanganyiko na Gradients

Matumizi na maski za gradient:

<div id="kisanduku-cha-gradient"></div>

#kisanduku-cha-gradient {
	upana: 400px;
	urefu: 400px;
	background: linear-gradient(45deg, nyekundu, manjano, kijani, bluu);
	mask-image: 
		radial-gradient(duara kwenye 30% 30%, nyeusi 40%, uwazi 70%),
		radial-gradient(duara kwenye 70% 70%, nyeusi 40%, uwazi 70%);
	mask-composite: exclude;
}

Angalia Pia

sifa mask-image,
inabainisha picha za maski
sifa mask,
ufupisho wa sifa zote za kufunika
sifa mask-mode,
inabainisha hali ya kuweka maski
sifa mix-blend-mode,
inabainisha hali ya kuweka vipengele