Taust-segamisrežiim - CSS-trikid

Lang L: none (table-of-contents)

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 .

Rohkem informatsiooni

  • CSS-i segamisrežiimide põhitõed
  • tausta segamise režiim MDN-is
  • Komponeerimine ja segamine W3C-l
  • background-blend-mode veebisaidil webplatform.org
  • CSS-i segarežiimi demode kogumine
  • CSS-i segurežiimide tundmaõppimine

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
35+ 7.1 35+ 27+ Ei 37+ 8.1+

Huvitavad Artiklid...