Režim miešania - Triky CSS | Almanach CSS 2025

Obsah:

mix-blend-modeVlastnosť definuje, ako obsah prvok by mala splynúť s pozadím. Napríklad text a

mohol zaujímavo splynúť s pozadím v pozadí.

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

Vo vyššie uvedenom príklade bol obsah upravený mix-blend-modetak, aby farby textu boli vylúčené z jeho pozadia. Toto je len jedna z mnohých hodnôt pre túto vlastnosť.

Vyskytol sa problém s prehliadačom Chrome 58+, ktorý mix-blend-modesa nebude vykresľovať na prvkoch nastavených priehľadne . V prehliadači Chrome bol označený lístok ako problém 711955, ktorý bol pridelený v čase písania tohto článku. Do tej doby je jednoduchou opravou priradiť bielej (alebo skutočne akejkoľvek) farbe pozadia k prvku tela.

Hodnoty

initial: predvolené nastavenie vlastnosti, ktorá nenastavuje režim prelínania.
inherit: prvok zdedí režim prelínania od svojho nadradeného prvku.
unset: odstráni aktuálny režim prelínania z prvku.
: toto je atribút jedného z režimov miešania uvedených nižšie:
normal: tento atribút nepoužíva žiadne miešanie.
multiply: prvok sa vynásobí pozadím a nahradí farbu pozadia. Výsledná farba je vždy taká tmavá ako pozadie.
screen: znásobí pozadie a obsah potom doplní výsledok. Výsledkom bude jasnejší obsah ako background-color.
prekrytie: znásobí alebo zobrazí obsah v závislosti od farby pozadia. Toto je inverzná činnosť voči režimu zmiešavania tvrdého svetla.
stmaviť: pozadie sa nahradí obsahom, kde je obsah tmavší, inak sa ponechá tak, ako bol.
lighten: pozadie sa nahradí obsahom, ktorý je svetlejší.
color-dodge: tento atribút zosvetlí farbu pozadia tak, aby odrážala farbu obsahu.
color-burn: toto stmaví pozadie, aby odrážalo prirodzenú farbu obsahu.
hard-light: v závislosti od farby obsahu ho tento atribút zobrazí alebo znásobí.
soft-light: v závislosti od farby obsahu to stmaví alebo zosvetlí.
difference: toto odčíta tmavšiu z dvoch farieb od najsvetlejšej.
exclusion: podobné, differenceale s nižším kontrastom.
hue: vytvorí farbu s odtieňom obsahu v kombinácii so sýtosťou a svetlosťou pozadia.
saturation: vytvorí farbu so sýtosťou obsahu v kombinácii s odtieňom a svetlosťou pozadia.
color: vytvorí farbu s odtieňom a sýtosťou obsahu a svetlosťou pozadia.
luminosity: vytvorí farbu so svietivosťou obsahu a odtieňom a sýtosťou pozadia. Toto je inverzná hodnota k coloratribútu.

Stojí za zmienku, že nastavením iného režimu prelínania normalsa vygeneruje nový kontext stohovania, ktorý sa potom musí zmiešať s kontextom stohovania, ktorý obsahuje prvok.

Účinok týchto hodnôt je uvedený v ukážke nižšie:

Viac informácií

Základy režimov miešania CSS
mix-blend-mode na MDN
mix-blend-mode na W3C
Zbierka ukážok režimu miešania CSS
Zoznámenie sa s režimami kombinácie CSS

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.