Background-blend-mode - CSS-triki

Par background-blend-modeīpašuma nosaka, kā elements ir background-imagejābūt saplūst ar savu sākotnējo background-color:

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

Skatiet CSS-Tricks pildspalvas fona sajaukšanas režīmu (@ css-tricks) vietnē CodePen.

Iepriekš redzamajā demonstrācijā pēc noklusējuma background-imagekreisajā pusē nav iestatīts sajaukšanas režīms, tāpēc attēls pārklājas ar background-color. Labajā pusē maisīšanas režīms ir mainījis background-imagesarkano background-colorapakšā. Bet ņemiet vērā, ka šī papildu īpašība nav ietekmējusi teksta krāsu.

Vērtības

initial: noklusējuma vērtība bez sajaukšanas.
inherit: manto vecākā elementa sajaukšanas režīmu.
: vērtība, kas mainīs fona attēlu atkarībā no tā fona krāsas.

Vērtību var iestatīt kā jebkurš no šiem (zemāk demos background-colorir sarkans):

`luminosity`: tiek saglabāta augšējās krāsas spilgtums, vienlaikus izmantojot fona krāsas piesātinājumu un nokrāsu.

Demonstrācija

Šis ir piemērs, kā šīs vērtības interpretē atkarībā no background-color:

Skatiet CSS-Tricks pildspalvas fona sajaukšanas režīmu (@ css-tricks) vietnē CodePen.

Vairāku maisījumu režīmu ķēde

Katram fona slānim var būt tikai viens sajaukšanas režīms, tomēr, ja mēs izmantojam, piemēram, vairākus lineārus gradientus, katram no tiem var būt savs sajaukšanas režīms, kas padara interesantu displeju:

Skatiet CSS-Tricks (@ css-tricks) pildspalvu gradientu un fona sajaukšanas režīmu vietnē CodePen.

To panāk, uzskaitot šīs vērtības fona slāņa secībā, kuru vēlaties izpildīt:

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

Pirmajam lineārajam gradientam ir screensajaukšanas režīms, kam seko otrais lineārais gradients, kuram ir, differenceun pirmais fona attēls, kas tam lightenpiemērots.