Background-blend-mode - CSS-trikovi

U background-blend-modevlasništva definira kako Element-a background-imagetreba uklopiti sa svojim background-color:

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

Pogledajte način rada Pen-blend-blend od CSS-Tricks (@ css-tricks) na CodePen-u.

U demonstraciji iznad zadani background-imagepostavljeni lijevo nisu postavljeni načini miješanja, pa se slika preklapa s background-color. S desne strane, međutim, način miješanja izmijenio background-imageje crvenu background-colorispod. No primijetite da ovo dodatno svojstvo nije utjecalo na boju teksta.

Vrijednosti

initial: zadana vrijednost bez miješanja.
inherit: nasljeđuje način miješanja nadređenog elementa.
: vrijednost koja će promijeniti pozadinsku sliku ovisno o njezinoj boji pozadine.

Vrijednost može se postaviti kao bilo koji od sljedećih (u pokazne su ispod background-colorcrveno):

`luminosity`: sjaj gornje boje očuvan je dok se koristi zasićenje i nijansa pozadinske boje.

Demo

Evo radnog primjera kako se te vrijednosti tumače ovisno o background-color:

Pogledajte način miješanja pozadine olovke od strane CSS-Tricks (@ css-tricks) na CodePenu.

Povezivanje više načina miješanja

Svaki pozadinski sloj može imati samo jedan način miješanja, no ako primjerice koristimo više linearnih gradijenata, svaki od njih može imati svoj vlastiti način miješanja što čini zanimljiv prikaz:

Pogledajte Gradiente olovke i način miješanja u pozadini od CSS-Tricks (@ css-tricks) na CodePen-u.

To se postiže navođenjem ovih vrijednosti po redoslijedu pozadinskog sloja koji želite izvršiti:

.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; )

Prvi linearni gradijent ima screennačin miješanja, zatim drugi linearni gradijent koji ima differencei prvu pozadinsku sliku koja je lightenprimijenjena na njega.