Свойство 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,
с което може да се наложи фоново изображение върху фонов цвят