Свойство background-blend-mode

Свойство background-blend-mode задает режим наложения фонового изображения на фоновый цвет или другие изображения. В данном свойстве можно также указать несколько значений через запятую, которые будут применяться в том же порядке. Значения для свойства аналогичны основным режимам графических редакторов.

Синтаксис

cssселектор {
  background-blend-mode: режимы;
}

В таблице представлены основные значения для свойства background-blend-mode:

Значения

Значение	Описание
`normal`	Обычный. Не используется смешивание цветов. Режим по умолчанию.
`multiply`	Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет.
`screen`	Осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет.
`overlay`	Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета.

Пример

Давайте посмотрим как будет выглядеть изображение со значением по умолчанию свойства background-blend-mode:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Пример

А теперь давайте поменяем значение свойства background-blend-mode на умножение:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Пример

Давайте установим для нашего изображения режим осветления:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Смотрите также

свойство background,
представляющее собой свойство-сокращение для фона
свойство background-image,
с помощью которого блоку можно задать фоновую картинку
свойство mix-blend-mode,
с помощью которого можно наложить исходные цвета на фоновое изображение
свойство backdrop-filter,
которое позволяет накладывать фильтры