Bakgrundsblandningsläge - CSS-tricks

De background-blend-modefastighets definierar hur ett elements background-imagebör smälter med sin background-color:

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

Se pennan bakgrundsblandningsläge av CSS-Tricks (@ css-tricks) på CodePen.

I demonstrationen ovan har standard background-imagetill vänster inget blandningsläge inställt, så bilden överlappar background-color. Till höger har dock blandningsläget modifierat det background-imagemed det röda background-colorunder. Lägg märke till att textfärgen inte har påverkats av den här ytterligare egenskapen.

Värden

initial: standardvärdet utan blandning.
inherit: ärver blandningsläget för det överordnade elementet.
: ett värde som ändrar bakgrundsbilden beroende på dess bakgrundsfärg.

Det värde kan ställas in som något av följande (i demonstrationer under background-colorär röd):

`luminosity`: ljusstyrkan hos toppfärgen bevaras medan du använder mättnad och nyans i bakgrundsfärgen.

Demo

Här är ett fungerande exempel på hur dessa värden tolkas beroende på background-color:

Se pennbakgrundsblandningsläget av CSS-Tricks (@ css-tricks) på CodePen.

Kedja flera blandningslägen

Varje bakgrundsskikt kan bara ha ett enda blandningsläge, men om vi till exempel använder flera linjära gradienter kan var och en av dem ha sitt eget blandningsläge vilket ger en intressant skärm:

Se Pen Gradients och bakgrundsblandningsläge av CSS-Tricks (@ css-tricks) på CodePen.

Detta uppnås genom att lista dessa värden i ordning efter det bakgrundslager som du vill göra:

.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örsta linjära lutningen har screenblandningsläget, följt av den andra linjära lutningen som har differenceoch den första bakgrundsbilden som har lightentillämpats på den.