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

selektor {
	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:

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

div {
	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í:

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

div {
	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í:

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

div {
	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í