Mix-blend-mode - CSS-trikovi | CSS Almanah 2025

mix-blend-modeSvojstvo definira kako sadržaj element trebao uklopiti s pozadinom. Na primjer, tekst a

mogao se na zanimljive načine stopiti s pozadinom iza nje.

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

U gornjem primjeru sadržaj je izmijenjen mix-blend-modetako da su boje teksta izuzete iz njegove pozadine. Ovo je samo jedna od mnogih vrijednosti za ovo svojstvo.

Postoji problem s Chromeom 58+ koji se mix-blend-modeneće prikazivati na elementima koji su postavljeni na prozirno . The je označen izdanjem 711955 u Chromeu, koje je dodijeljeno u vrijeme pisanja ovog članka. U međuvremenu, jednostavno rješenje je dodijeliti bijelu (ili stvarno bilo koju) boju pozadine elementu tijela.

Vrijednosti

initial: zadana postavka svojstva koja ne postavlja način miješanja.
inherit: element će naslijediti način miješanja od svog nadređenog elementa.
unset: uklanja trenutni način miješanja iz elementa.
: ovo je atribut jednog od blend modova ispod:
normal: ovaj atribut ne primjenjuje nikakvo miješanje.
multiply: element se pomnoži s pozadinom i zamjenjuje boju pozadine. Dobivena boja uvijek je tamna poput pozadine.
screen: množi pozadinu i sadržaj zatim dopunjava rezultat. To će rezultirati svjetlijim sadržajem od background-color.
prekrivanje: množi ili prikazuje sadržaj ovisno o boji pozadine. Ovo je inverzno načinu rada mješavine tvrdog svjetla.
potamniti: pozadina se zamjenjuje sadržajem tamo gdje je sadržaj tamniji, u suprotnom ostaje nepromijenjen.
lighten: pozadina se zamjenjuje sadržajem tamo gdje je sadržaj svjetliji.
color-dodge: ovaj atribut osvjetljava boju pozadine kako bi odražavala boju sadržaja.
color-burn: ovo potamnjuje pozadinu da odražava prirodnu boju sadržaja.
hard-light: ovisno o boji sadržaja, ovaj će ga atribut prikazati ili umnožiti.
soft-light: ovisno o boji sadržaja, ovo će ga potamniti ili posvijetliti.
difference: ovo oduzima najtamniju od dvije boje od najsvjetlije boje.
exclusion: slično, differenceali s nižim kontrastom.
hue: stvara boju s nijansom sadržaja u kombinaciji sa zasićenošću i osvijetljenošću pozadine.
saturation: stvara boju zasićenjem sadržaja u kombinaciji s nijansom i osvjetljenjem pozadine.
color: stvara boju s nijansom i zasićenošću sadržaja te osvjetljenošću pozadine.
luminosity: stvara boju s osvijetljenošću sadržaja te nijansom i zasićenošću pozadine. Ovo je inverzna vrijednost coloratributa.

Vrijedno je napomenuti da postavljanje načina miješanja koji normalneće generirati novi kontekst slaganja koji se zatim mora uklopiti s kontekstom slaganja koji sadrži element.

Učinak ovih vrijednosti prikazan je u demonstraciji ispod:

Više informacija

Osnove načina rada CSS Blend
mix-blend-mode na MDN-u
mix-blend-mode na W3C
Zbirka demonstracija CSS Blend Mode
Upoznavanje CSS načina rada

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.