Svojstvo mix-blend-mode

Svojstvo mix-blend-mode postavlja režim mešanja izvorne boje sa pozadinskom bojom ili pozadinskom slikom. Vrednosti za svojstvo su analogne osnovnim režimima grafičkih editora.

Sintaksa

cssselektor {
  mix-blend-mode: vrednosti;
}

U tabeli su predstavljene osnovne vrednosti za svojstvo mix-blend-mode:

Vrednosti

Vrednost	Opis
`normal`	Normalan. Ne koristi se mešanje boja. Podrazumevani režim.
`multiply`	Množenje. U ovom režimu vrednost osnovne boje se množi sa vrednošću kombinovane boje. Rezultujuća boja je uvek tamnija boja.
`screen`	Osvetljavanje. U ovom režimu se množe inverzne vrednosti osnovne i kombinovane boje. Kao rezultujuća boja se uvek primenjuje svetlija boja.
`overlay`	Preklapanje. U ovom režimu boje se množe ili osvetljavaju u zavisnosti od osnovne boje. Šare ili boje preklapaju 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 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;
}

Результат:

Primer

A sada hajde da promenimo režim mešanja na množenje:

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

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

Результат:

Primer

Hajde da postavimo svojstvu mix-blend-mode vrednost preklapanja:

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

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

Результат:

Pogledajte takođe

svojstvo background,
koje predstavlja skraćeno svojstvo za pozadinu
svojstvo background-image,
pomoću kojeg se bloku može postaviti pozadinska slika
svojstvo background-blend-mode,
pomoću kojeg se može preklopiti pozadinska slika sa pozadinskom bojom