Vlastnost background-blend-mode

Vlastnost background-blend-mode nastavuje režim prolínání pozadí obrázku s barvou pozadí nebo jinými obrázky. V této vlastnosti lze také uvést více hodnot oddělených čárkou, které budou aplikovány ve stejném pořadí. Hodnoty pro vlastnost jsou analogické hlavním režimům grafických editorů.

Syntaxe

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

V tabulce jsou uvedeny hlavní hodnoty pro vlastnost background-blend-mode:

Hodnoty

Hodnota	Popis
`normal`	Normální. Nepoužívá se míchání barev. Výchozí režim.
`multiply`	Násobení. V tomto režimu se hodnota základní barvy násobí hodnotou sloučené barvy. Výsledná barva je vždy tmavší barvou.
`screen`	Prosvětlení. V tomto režimu se násobí inverzní hodnoty základní a sloučené barvy. Jako výsledná barva se vždy použije světlejší barva.
`overlay`	Překrytí. V tomto režimu se barvy násobí nebo prosvětlují v závislosti na základní barvě. Vzory nebo barvy překrývají existující pixely, přičemž světlé a tmavé oblasti základní barvy zůstávají nezměněny.

Příklad

Podívejme se, jak bude obrázek vypadat s výchozí 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;
}

Результат:

Příklad

A nyní změňme hodnotu vlastnosti background-blend-mode na násobení:

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

Результат:

Příklad

Nastavme pro náš obrázek režim prosvětlení:

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

Результат:

Viz také

vlastnost background,
která je zkratkovou vlastností pro pozadí
vlastnost background-image,
pomocí které lze bloku nastavit obrázek na pozadí
vlastnost mix-blend-mode,
pomocí které lze prolít původní barvy s obrázkem na pozadí
vlastnost backdrop-filter,
která umožňuje aplikovat filtry