Mix-blend-mode - CSS-trikid

Lang L: none (table-of-contents):

Anonim

mix-blend-modeVara määratleb, kuidas element sisu peaks segu tema tausta. Näiteks a

võiks huvitaval viisil sulanduda selle tagamaaga. 
.blend ( mix-blend-mode: exclusion; )

Ülalolevas näites on sisu muudetud mix-blend-modenii, et teksti värvid jäetakse selle taustast välja. See on vaid üks selle vara paljudest väärtustest.

Chrome 58+-ga on probleem, mida mix-blend-modeei renderdata läbipaistvale seadistatud elementidele . Selle pilet on Chrome'is välja antud numbrina 711955, mis määratakse selle kirjutamise ajal. Vahepeal on lihtne parandus määrata kehaelemendile valge (või tõesti mis tahes) taustavärv.

Väärtused

  • initial: atribuudi vaikeseade, mis ei määra segarežiimi.
  • inherit: element pärib segamisrežiimi oma vanemelemendilt.
  • unset: eemaldab elemendilt praeguse segamisrežiimi.
  • : see on ühe alloleva segu režiimi atribuut:
  • normal: see atribuut ei kehti üldse.
  • multiply: element korrutatakse taustaga ja asendab taustavärvi. Saadud värv on alati sama tume kui taust.
  • screen: korrutab tausta ja sisu täiendab seejärel tulemust. Selle tulemuseks on sisu, mis on heledam kui background-color.
  • ülekate: paljundab või kuvab sisu olenevalt taustavärvist. See on kõva valguse segamise režiimi pöördvõimalus.
  • tumenema: taust asendatakse sisuga seal, kus sisu on tumedam, vastasel juhul jäetakse see nii, nagu ta oli.
  • lighten: taust asendatakse sisuga, kus sisu on heledam.
  • color-dodge: see atribuut helendab taustavärvi sisu värvi kajastamiseks.
  • color-burn: see muudab tausta tumedamaks, et kajastada sisu loomulikku värvi.
  • hard-light: sõltuvalt sisu värvist see atribuut seda kuvab või korrutab.
  • soft-light: sõltuvalt sisu värvist muudab see tumedamaks või heledamaks.
  • difference: see lahutab heledamast kahest värvist tumedama.
  • exclusion: sarnane, differencekuid madalama kontrastiga.
  • hue: loob värvi, mille sisu varjund on ühendatud tausta küllastuse ja heledusega.
  • saturation: loob värvi, mille sisu on küllastunud, kombineerituna tausta tooni ja heledusega.
  • color: loob värvi koos tooni ja sisu küllastumise ning tausta heledusega.
  • luminosity: loob värvi koos sisu heleduse ning tausta tooni ja küllastusega. See on coloratribuudi pöördväärtus .

Väärib märkimist, et segamisrežiimi määramine peale normalselle, et genereeritakse uus virnastuskontekst, mis tuleb seejärel segada elementi sisaldava virnastuskontekstiga.

Nende väärtuste mõju on näidatud allpool toodud demos:

Rohkem informatsiooni

  • CSS Blendi režiimide põhitõed
  • mix-blend-mode MDN-is
  • mix-blend-režiim W3C-l
  • CSS Blend Mode'i demode kogu
  • CSS-i segurežiimidega tutvumine

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
41 32 Ei 79 TP

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 81 14,0–14,4