⌘K

Lastnost mix-blend-mode

Lastnost mix-blend-mode določa način mešanja izvorne barve na barvo ozadja ali sliko ozadja. Vrednosti za lastnost so analogne osnovnim načinom grafičnih urejevalnikov.

Sintaksa

cssselektor {
  mix-blend-mode: vrednosti;
}

V tabeli so predstavljene glavne vrednosti za lastnost mix-blend-mode:

Vrednosti

Vrednost Opis
normal Običajen. Mešanje barv se ne uporablja. Privzeti način.
multiply Množenje. V tem načinu se vrednost osnovne barve pomnoži z vrednostjo združene barve. Končna barva je vedno temnejša barva.
screen Svetljenje. V tem načinu se pomnožijo obratne vrednosti osnovne in združene barve. Kot končna barva se vedno uporabi svetlejša barva.
overlay Prekrivanje. V tem načinu se barve množijo ali svetlijo odvisno od osnovne barve. Vzorci ali barve prekrivajo obstoječe piksele, pri čemer ostanejo svetli in temni deli osnovne barve nespremenjeni.

Primer

Poglejmo, kako bo izgledala slika z privzeto vrednostjo lastnosti 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

Zdaj pa spremenimo način 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

Nastavimo lastnosti mix-blend-mode vrednost prekrivanja: 

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Glejte tudi

BackLastnost background-blend-modeNextLastnost filter