Vlastnosť background-blend-mode

Vlastnosť background-blend-mode nastavuje režim prekrytia obrázka na pozadí s farbou pozadia alebo inými obrázkami. V tejto vlastnosti je možné uviesť aj niekoľko hodnôt oddelených čiarkou, ktoré sa budú aplikovať v rovnakom poradí. Hodnoty pre vlastnosť sú analogické základným režimom grafických editorov.

Syntax

cssselektor {
  background-blend-mode: režimy;
}

V tabuľke sú uvedené základné hodnoty pre vlastnosť background-blend-mode:

Hodnoty

Hodnota	Popis
`normal`	Normálny. Nepoužíva sa miešanie farieb. Predvolený režim.
`multiply`	Násobenie. V tomto režime sa hodnota základnej farby násobí s hodnotou prelínanej farby. Výsledná farba je vždy tmavšia farba.
`screen`	Svetlosť. V tomto režime sa násobia inverzné hodnoty základnej a prelínanej farby. Ako výsledná farba sa vždy použije svetlejšia farba.
`overlay`	Prekrytie. V tomto režime sa farby násobia alebo zosvetľujú v závislosti od základnej farby. Vzory alebo farby prekrývajú existujúce pixely, pričom svetlé a tmavé oblasti základnej farby zostávajú nezmenené.

Príklad

Pozrime sa, ako bude vyzerať obrázok s predvolenou hodnotou vlastnosti 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;
}

Результат:

Príklad

A teraz zmeňme hodnotu vlastnosti background-blend-mode na násobenie:

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

Результат:

Príklad

Nastavme pre náš obrázok režim svetlosti:

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

Результат:

Pozri tiež

vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie
vlastnosť background-image,
pomocou ktorej je možné bloku nastaviť obrázok na pozadí
vlastnosť mix-blend-mode,
pomocou ktorej je možné prelínať farby prvku s obsahom, ktorý je za ním
vlastnosť backdrop-filter,
ktorá umožňuje aplikovať filtre na oblasť za prvkom