Vlastnost mix-blend-mode

Vlastnost mix-blend-mode nastavuje režim prolínání zdrojové barvy s barvou pozadí nebo obrázkem na pozadí. Hodnoty pro vlastnost jsou analogické hlavním režimům grafických editorů.

Syntaxe

cssselektor {
  mix-blend-mode: hodnoty;
}

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

Hodnoty

Hodnota	Popis
`normal`	Normální. Není použito míchání barev. Výchozí režim.
`multiply`	Násobení. V tomto režimu se hodnota základní barvy násobí hodnotou kombinované barvy. Výsledná barva je vždy tmavší barva.
`screen`	Prosvětlení. V tomto režimu se násobí inverzní hodnoty základní a kombinované 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 vypadat obrázek s výchozí hodnotou vlastnosti 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;
}

Результат:

Příklad

A nyní změňme režim prolínání na násobení:

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

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

Результат:

Příklad

Nastavme vlastnosti mix-blend-mode hodnotu překrytí:

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

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

Результат:

Viz také

vlastnost background,
která je zkratkovou vlastností pro pozadí
vlastnost background-image,
pomocí které lze prvku nastavit obrázek na pozadí
vlastnost background-blend-mode,
pomocí které lze prolínat obrázek na pozadí s barvou pozadí