Režim míchání - Triky CSS | Almanach CSS 2025

mix-blend-modeVlastnost definuje, jak obsah prvek by měla splynout s pozadím. Například text a

mohl zajímavě splynout s pozadím za ním.

.blend ( mix-blend-mode: exclusion; )

Ve výše uvedeném příkladu byl obsah upraven mix-blend-modetak, aby barvy textu byly vyloučeny z jeho pozadí. Toto je jen jedna z mnoha hodnot pro tuto vlastnost.

U Chrome 58+ došlo k problému, kdy mix-blend-modese nebude vykreslovat na prvcích, které jsou nastaveny na průhledném . V prohlížeči Chrome bylo zaškrtnuto číslo 711955, které bylo přiděleno v době psaní tohoto článku. Do té doby je jednoduchou opravou přiřadit bílou (nebo opravdu jakoukoli) barvu pozadí elementu těla.

Hodnoty

initial: výchozí nastavení vlastnosti, která nenastavuje režim prolnutí.
inherit: prvek zdědí režim prolnutí od svého nadřazeného prvku.
unset: odstraní aktuální režim prolnutí z prvku.
: toto je atribut jednoho z režimů míchání níže:
normal: tento atribut nepoužívá žádné míchání.
multiply: prvek se vynásobí pozadím a nahradí barvu pozadí. Výsledná barva je vždy stejně tmavá jako pozadí.
screen: znásobí pozadí a obsah pak doplní výsledek. Výsledkem bude jasnější obsah než background-color.
překrytí: znásobí nebo zobrazí obsah v závislosti na barvě pozadí. Jedná se o inverzní funkci režimu míchání tvrdého světla.
ztmavit: pozadí je nahrazeno obsahem, kde je obsah tmavší, jinak bude ponechán beze změny.
lighten: pozadí je nahrazeno obsahem, kde je obsah světlejší.
color-dodge: tento atribut rozjasní barvu pozadí tak, aby odrážela barvu obsahu.
color-burn: toto ztmaví pozadí, aby odráželo přirozenou barvu obsahu.
hard-light: v závislosti na barvě obsahu jej tento atribut promítne nebo znásobí.
soft-light: v závislosti na barvě obsahu to ztmaví nebo zesvětlí.
difference: toto odečte tmavší ze dvou barev od nejsvětlejší barvy.
exclusion: podobné, differenceale s nižším kontrastem.
hue: vytvoří barvu s odstínem obsahu v kombinaci se sytostí a zářivostí pozadí.
saturation: vytvoří barvu se sytostí obsahu v kombinaci s odstínem a světlostí pozadí.
color: vytvoří barvu s odstínem a sytostí obsahu a zářivostí pozadí.
luminosity: vytvoří barvu s jasem obsahu a odstínem a sytostí pozadí. Toto je inverzní hodnota coloratributu.

Stojí za zmínku, že nastavení jiného režimu prolnutí než normalvygeneruje nový kontext skládání, který musí být poté smíchán s kontextem skládání, který obsahuje prvek.

Účinek těchto hodnot je uveden v ukázce níže:

Více informací

Základy režimů míchání CSS
režim mix-blend na MDN
mix-blend-mode na W3C
Sbírka ukázek režimu míchání CSS
Seznámení s režimy míchání CSS

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.