Bakgrunnsblandingsmodus - CSS-triks

De background-blend-modeeiendoms definerer hvordan et element background-imagebør harmonerer med sitt background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Se pennens bakgrunnsblandingsmodus av CSS-Tricks (@ css-tricks) på CodePen.

I demoen ovenfor har standard background-imagetil venstre ingen blandingsmodus angitt, og bildet overlapper background-color. På høyre side har blandingsmodusen endret den background-imagemed den røde background-colorunder. Men legg merke til at tekstfargen ikke har blitt påvirket av denne tilleggsegenskapen.

Verdier

initial: standardverdien uten blanding.
inherit: arver blandingsmodus til det overordnede elementet.
: en verdi som vil endre bakgrunnsbildet avhengig av bakgrunnsfargen.

Den verdi kan settes som en hvilken som helst av følgende: (i demonstrasjoner nedenfor background-colorer rød):

`luminosity`: lysstyrken til toppfargen bevares mens du bruker metningen og fargen på bakgrunnsfargen.

Demo

Her er et fungerende eksempel på hvordan disse verdiene tolkes avhengig av background-color:

Se blandingsmodus for pennbakgrunn av CSS-Tricks (@ css-tricks) på CodePen.

Kjeder flere blandingsmodi

Hvert bakgrunnslag kan bare ha en enkelt blandingsmodus, men hvis vi for eksempel bruker flere lineære gradienter, kan hver av dem ha sin egen blandingsmodus som gir en interessant visning:

Se pennforløp og bakgrunnsblandingsmodus av CSS-Tricks (@ css-tricks) på CodePen.

Dette oppnås ved å liste opp disse verdiene i rekkefølge etter bakgrunnslaget du vil påvirke:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Den første lineære gradienten har screenblandingsmodus, etterfulgt av den andre lineære gradienten som har differenceog det første bakgrunnsbildet som er lightenbrukt på den.