Свойство 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,
което позволява прилагане на филтри