Свойство 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,
с помощью которого можно наложить фоновое изображение на фоновый цвет