Својство 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,
које омогућава да се примењују филтери