Bland-bland-modus - CSS-triks

Innholdsfortegnelse:

Anonim

Den mix-blend-modeegenskapen definerer hvordan et element innhold bør blande seg med sin bakgrunn. For eksempel teksten til en

kunne blandes med bakgrunnen bak på interessante måter. 
.blend ( mix-blend-mode: exclusion; )

I eksemplet ovenfor er innholdet modifisert av mix-blend-modeslik at fargene på teksten er ekskludert fra bakgrunnen. Dette er bare en av mange verdier for denne eiendommen.

Det er et problem med Chrome 58+ der mix-blend-modedet ikke gjengis på elementer som er satt på gjennomsiktig . Dette har blitt billettert som utgave 711955 i Chrome, som er tildelt i skrivende stund. I mellomtiden er en enkel løsning å tildele kroppens element en hvit (eller egentlig hvilken som helst) bakgrunnsfarge.

Verdier

  • initial: standardinnstillingen for egenskapen som ikke angir en blandingsmodus.
  • inherit: et element vil arve blandingsmodus fra det overordnede elementet.
  • unset: fjerner gjeldende blandingsmodus fra et element.
  • : dette er attributtet til en av blandingsmodusene under:
  • normal: dette attributtet gjelder ingen blanding overhodet.
  • multiply: elementet multipliseres med bakgrunnen og erstatter bakgrunnsfargen. Den resulterende fargen er alltid like mørk som bakgrunnen.
  • screen: multipliserer bakgrunnen og innholdet kompletterer deretter resultatet. Dette vil resultere i innhold som er lysere enn background-color.
  • overlay: multipliserer eller viser innholdet avhengig av bakgrunnsfargen. Dette er det motsatte av blandingen med hardt lys.
  • mørkere: bakgrunnen erstattes med innholdet der innholdet er mørkere, ellers blir det igjen som det var.
  • lighten: bakgrunnen erstattes med innholdet der innholdet er lettere.
  • color-dodge: denne egenskapen lyser bakgrunnsfargen for å gjenspeile fargen på innholdet.
  • color-burn: dette gjør bakgrunnen mørkere for å gjenspeile innholdets naturlige farge.
  • hard-light: avhengig av fargen på innholdet som dette attributtet viser eller multipliserer.
  • soft-light: avhengig av fargen på innholdet, blir dette mørkere eller lysere.
  • difference: dette trekker den mørkeste av de to fargene fra den lyseste fargen.
  • exclusion: ligner på differencemen med lavere kontrast.
  • hue: skaper en farge med innholdet i kombinasjon med metningen og lysstyrken i bakgrunnen.
  • saturation: skaper en farge med metning av innholdet kombinert med fargetone og lysstyrke i bakgrunnen.
  • color: skaper en farge med fargen og metningen av innholdet og lysstyrken i bakgrunnen.
  • luminosity: skaper en farge med innholdets lysstyrke og bakgrunnsfargen og metningen. Dette er det omvendte av colorattributtet.

Det er verdt å merke seg at innstilling av en annen blandingsmodus enn normalvil generere en ny stablingskontekst som deretter må blandes med stablingskonteksten som inneholder elementet.

Effekten av disse verdiene vises i demoen nedenfor:

Mer informasjon

  • Grunnleggende om CSS Blend-modus
  • bland-bland-modus på MDN
  • bland-bland-modus på W3C
  • En samling av CSS Blend Mode-demoer
  • Bli kjent med CSS Blend Modes

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
41 32 Nei 79 TP

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4