Sifa mix-blend-mode

Sifa mix-blend-mode inabainisha hali ya kuchanganya rangi ya asili juu ya rangi ya msingi au picha ya msingi. Thamani za sifa hiyo zinafanana na hali kuu za wahariri wa grafiki.

Kisanii

kichaguzi {
	mix-blend-mode: thamani;
}

Jedwali linaonyesha thamani kuu za sifa mix-blend-mode:

Thamani

Thamani	Maelezo
`normal`	Kawaida. Hautumii kuchanganya rangi. Hali ya chaguomsingi.
`multiply`	Kuzidisha. Katika hali hii, thamani ya rangi ya msingi inazidishwa kwa thamani ya rangi iliyochanganywa. Rangi ya matokeo daima ni rangi nyeusi zaidi.
`screen`	Kuwasha. Katika hali hii, thamani za kinyume za rangi ya msingi na iliyochanganywa zinazidishwa. Kama rangi ya matokeo daima huwekwa rangi nyepesi zaidi.
`overlay`	Kufunika. Katika hali hii, rangi huzidishwa au kuwashwa kulingana na rangi ya msingi. Mchoro au rangi hufunika sauti zilizopo, huku ukiacha sehemu zilizowashwa na zile zilizokuwa giza za rangi ya msingi hazijabadilika.

Mfano

Wacha tuone jinsi picha itakavyoonekana ikiwa na thamani ya chaguomsingi ya sifa mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Mfano

Sasa hebu tubadilishe hali ya kuchanganya kuwa kuzidisha:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Mfano

Wacha tuweke sifa mix-blend-mode thamani ya kufunika:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Angalia Pia

sifa background,
inayowakilisha sifa iliyofupishwa kwa msingi
sifa background-image,
ambayo kwa kutumia block inaweza kupewa picha ya msingi
sifa background-blend-mode,
ambayo kwa kutumia inaweza kuweka picha ya msingi juu ya rangi ya msingi