Својство mix-blend-mode

Својство mix-blend-mode поставља режим мешања изворне боје са бојом позадине или позадинском сликом. Вредности за својство су аналогне основним режимима графичких едитора.

Синтакса

cssселектор {
  mix-blend-mode: вредности;
}

У табели су представљене основне вредности за својство mix-blend-mode:

Вредности

Вредност	Опис
`normal`	Нормално. Не користи се мешање боја. Подразумевани режим.
`multiply`	Множење. У овом режиму вредност основне боје се множи са вредношћу комбиноване боје. Резултујућа боја је увек тамнија боја.
`screen`	Осветљавање. У овом режиму се множе инверзне вредности основне и комбиноване боје. Као резултујућа боја се увек примењује светлија боја.
`overlay`	Преклапање. У овом режиму боје се множе или осветљавају у зависности од основне боје. Шаре или боје прекривају постојеће пикселе, остављајући неизмењене светле и тамне делове основне боје.

Пример

Хајде да видимо како ће изгледати слика са подразумеваном вредношћу својства mix-blend-mode:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Пример

А сада хајде да променимо режим мешања на множење:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Пример

Хајде да задамо својству mix-blend-mode вредност преклапања:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Погледајте такође

својство background,
које представља скраћеницу за позадину
својство background-image,
помоћу којег блоку можемо задати позадинску слику
својство background-blend-mode,
помоћу којег можемо преклапити позадинску слику на позадинску боју