Svojstvo background-blend-mode

Svojstvo background-blend-mode zadaje režim preklapanja pozadinske slike na pozadinsku boju ili druge slike. U ovom svojstvu se takođe mogu navesti više vrednosti odvojenih zarezom, koje će se primenjivati u istom redosledu. Vrednosti za svojstvo su analogne osnovnim režimima grafičkih editora.

Sintaksa

cssselektor {
  background-blend-mode: rezimi;
}

U tabeli su prikazane osnovne vrednosti za svojstvo background-blend-mode:

Vrednosti

Vrednost	Opis
`normal`	Normalan. Ne koristi se mešanje boja. Podrazumevani režim.
`multiply`	Množenje. U ovom režimu se vrednost osnovne boje množi sa vrednošću kombinovane boje. Rezultujuća boja uvek predstavlja tamniju boju.
`screen`	Osvetljavanje. U ovom režimu se množe inverzne vrednosti osnovne i kombinovane boje. Kao rezultujuća boja uvek se primenjuje svetlija boja.
`overlay`	Preklapanje. U ovom režimu se boje množe ili osvetljavaju zavisno od osnovne boje. Šare ili boje prekrivaju postojeće piksele, ostavljajući nepromenjene svetle i tamne delove osnovne boje.

Primer

Hajde da pogledamo kako će izgledati slika sa podrazumevanom vrednošću svojstva 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;
}

Результат:

Primer

A sada hajde da promenimo vrednost svojstva background-blend-mode na množenje:

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;
}

Результат:

Primer

Hajde da postavimo za našu sliku režim osvetljavanja:

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;
}

Результат:

Vidi takođe

svojstvo background,
koje predstavlja skraćeni zapis za pozadinu
svojstvo background-image,
pomoću kojeg se bloku može zadati pozadinska slika
svojstvo mix-blend-mode,
pomoću kojeg se mogu preklopiti izvorne boje na pozadinsku sliku
svojstvo backdrop-filter,
koje omogućava primenu filtera