Својството 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,
кое овозможува примена на филтри