Taust-segamisrežiim - CSS-trikid

background-blend-modeVara määratleb, kuidas elemendi background-imagepeaks segu tema background-color:

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

Vaadake CodePenil CSS-Tricks'i pliiatsi taustsegu režiimi (@ css-tricks).

Ülalolevas demos background-imagepole vasakpoolsel vaikeseadel segamisrežiimi määratud ja nii kattub pilt background-color. Paremal pool on segamisrežiim muutnud background-imagepunase background-colorall olevat. Kuid pange tähele, et see täiendav omadus pole teksti värvi mõjutanud.

Väärtused

initial: vaikeväärtus ilma segamiseta.
inherit: pärib vanemelemendi segamisrežiimi.
: väärtus, mis muudab taustapilti sõltuvalt selle taustavärvist.

Väärtuse saab määrata mis tahes järgmine (in demod alla background-coloron punane):

`luminosity`: ülemise värvi heledus säilib, kasutades taustavärvi küllastust ja tooni.

Demo

Siin on toimiv näide nende väärtuste tõlgendamisest sõltuvalt background-color:

Vaadake CodePenil CSS-Tricksi (@ css-tricks) pliiatsi Pliiatsi segamise režiimi.

Aheldada mitu segu režiimi

Igal taustkihil võib olla ainult üks segamisrežiim, kuid kui kasutame näiteks mitut lineaarset gradienti, võib igal neist olla oma segarežiim, mis teeb huvitava kuva:

Vaadake CodePenist CSS-Tricksi (@ css-tricks) pliiatsi gradientide ja tausta segamise režiimi.

See saavutatakse nende väärtuste loetlemisega taustkihi järjekorras, mida soovite muuta:

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

Esimesel lineaarsel gradiendil on screensegamisrežiim, millele järgneb teine lineaarne gradiend differenceja esimene sellele lightenrakendatud taustpilt .