⌘K

Lastnost background-blend-mode

Lastnost background-blend-mode določa način mešanja ozadne slike z ozadno barvo ali drugimi slikami. V tej lastnosti lahko tudi določite več vrednosti, ločenih z vejico, ki se bodo uporabljale v enakem vrstnem redu. Vrednosti za lastnost so podobne osnovnim načinom grafičnih urejevalnikov.

Sintaksa

cssselektor {
  background-blend-mode: načini;
}

V tabeli so predstavljene osnovne vrednosti za lastnost background-blend-mode:

Vrednosti

Vrednost Opis
normal Običajno. Mešanje barv se ne uporablja. Privzeti način.
multiply Množenje. V tem načinu se vrednost osnovne barve pomnoži z vrednostjo mešane barve. Končna barva je vedno temnejša barva.
screen Svetljenje. V tem načinu se pomnožijo obratne vrednosti osnovne in mešane 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 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

Zdaj pa spremenimo vrednost lastnosti 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

Nastavimo naši sliki način svetljenja: 

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

Результат:

Glejte tudi

BackLastnost backdrop-filterNextLastnost mix-blend-mode