Хосияти mix-blend-mode

Хосияти mix-blend-mode реҷаи омехтани ранги аслии бо ранги замина ё тасвири заминаро муайян мекунад. Қиматҳо барои хосият монанд ба реҷаҳои асосии барномаҳои графикӣ мебошанд.

Синтаксис

интихобкунанда {
	mix-blend-mode: қимат;
}

Дар ҷадвал қиматҳои асосии барои хосияти mix-blend-mode оварда шудаанд:

Қиматҳо

Қимат	Тавсиф
`normal`	Оддӣ. Омехтани рангҳо истифода намешавад. Реҷаи пешфарз.
`multiply`	Зарб. Дар ин реҷа қимати ранги асосӣ зарб мешавад ба қимати ранги ҳамроҳшуда. Ранги натиҷа ҳамеша ранги ториқтарро ифода мекунад.
`screen`	Равшансозӣ. Дар ин реҷа қиматҳои баръакси ранги асосӣ ва ранги ҳамроҳшуда зарб мешаванд. Ҳамчун ранги натиҷа ҳамеша ранги равшантар татбиқ мешавад.
`overlay`	Пӯшиш. Дар ин реҷа рангҳо зарб ё равшан карда мешаванд вобаста ба ранги асосӣ. Нақшунугорҳо ё рангҳо пикселҳои мавҷударо мепӯшанд, боқимондаҳои равшан ва торики ранги асосиро тағйирнодида мегузоранд.

Намуна

Биёед бинем, ки тасвир бо қимати пешфарзи хосияти 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;
}

Намуна

Ва акнун биёед реҷаи омехтанро ба зарб иваз кунем:

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

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

Намуна

Биёед ба хосияти mix-blend-mode қимати пӯшишро додан кунем:

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

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

Ҳамчунин бинед

хосияти background,
ки хосияти кӯтоҳкардашуда барои замина мебошад
хосияти background-image,
бо ёрии он ба блок метавон тасвири замина дод
хосияти background-blend-mode,
бо ёрии он метавон тасвири заминаро бар ранги замина омехт