Уласцівасць 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,
з дапамогай якой можна накласці фонавы відарыс на фонавы колер