Tausta-sekoitustila - CSS-temppuja

background-blend-modeOminaisuus määrittää, kuinka elementin background-imagetulisi sulautua sen background-color:

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

Katso CSS-Tricksin kynän tausta-sekoitustila (@ css-tricks) CodePenistä.

Yllä olevassa esittelyssä background-imagevasemmalla olevalla oletusarvolla ei ole sekoitustilaa, joten kuva on päällekkäinen background-color. Oikealla sekoitustila on kuitenkin muuttanut background-imagepunaisen background-coloralapuolella. Huomaa kuitenkin, että tämä lisäominaisuus ei ole vaikuttanut tekstin väriin.

Arvot

initial: oletusarvo ilman sekoittamista.
inherit: perii pääelementin sekoitustilan.
: arvo, joka muuttaa taustakuvan sen taustaväristä riippuen.

Arvo voidaan asettaa jokin seuraavista (demot alla background-coloron punainen):

`luminosity`: päävärin kirkkaus säilyy samalla, kun käytetään taustavärin kylläisyyttä ja sävyä.

Demo

Tässä on toimiva esimerkki näiden arvojen tulkinnasta riippuen background-color:

Katso CSS-Tricksin (@ css-tricks) kynän taustasekoitustila CodePenistä.

Ketjua useita sekoitustiloja

Jokaisella taustakerroksella voi olla vain yksi sekoitustila, mutta jos esimerkiksi käytämme useita lineaarisia kaltevuuksia, jokaisella niistä voi olla oma sekoitustila, joka tekee mielenkiintoisesta näytöstä:

Katso CSS-Tricksin (@ css-tricks) kynän gradientit ja tausta-sekoitustila CodePenistä.

Tämä saavutetaan lisäämällä nämä arvot taustakerroksen järjestykseen, jonka haluat vaikuttaa:

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

Ensimmäisellä lineaarisella gradientilla on screensekoitustila, jota seuraa toinen lineaarinen gradientti, jolla on, differenceja ensimmäinen taustakuva, joka on siihen lightensovellettu.