Fundal-blend-mode - CSS-Tricks

De background-blend-modedefinește proprietatea modul în care un element lui background-imagear trebui să amestec cu ei background-color:

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

Vedeți Pen background-blend-mode de CSS-Tricks (@ css-tricks) pe CodePen.

În demonstrația de mai sus, valoarea implicită background-imagedin stânga nu are setat modul de amestecare și astfel imaginea se suprapune peste background-color. Cu toate acestea, în dreapta, modul de amestecare a modificat background-imagecu roșu background-colordedesubt. Observați însă că culoarea textului nu a fost afectată de această proprietate suplimentară.

Valori

initial: valoarea implicită fără amestecare.
inherit: moștenește modul de amestecare al elementului părinte.
: o valoare care va schimba imaginea de fundal în funcție de culoarea de fundal.

Valoarea poate fi setată ca oricare dintre următoarele (în demo - urile sub nivelul background-coloreste roșu):

`luminosity`: luminozitatea culorii superioare este păstrată în timp ce se utilizează saturația și nuanța culorii de fundal.

Demo

Iată un exemplu de lucru al modului în care aceste valori sunt interpretate în funcție de background-color:

Vedeți modul de amestecare a fundalului stiloului de CSS-Tricks (@ css-tricks) pe CodePen.

Înlănțuirea mai multor moduri de amestecare

Fiecare strat de fundal poate avea doar un singur mod de amestecare, totuși, dacă folosim mai multe gradiente liniare, de exemplu, fiecare dintre ele poate avea propriul mod de amestecare, ceea ce face un afișaj interesant:

Vedeți Gradientele stiloului și fundal-blend-mode de CSS-Tricks (@ css-tricks) pe CodePen.

Acest lucru se realizează prin listarea acestor valori în ordinea stratului de fundal pe care doriți să îl efectuați:

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

Primul gradient liniar are screenmodul de amestecare, urmat de al doilea gradient liniar care are differenceși prima imagine de fundal care i s-a lightenaplicat.