Mix-blend-mode - CSS-tricks

Indholdsfortegnelse:

Anonim

Den mix-blend-modeegenskab definerer, hvordan et element indhold bør blande med sin baggrund. F.eks. Teksten til en

kunne blandes med baggrunden bag det på interessante måder. 
.blend ( mix-blend-mode: exclusion; )

I eksemplet ovenfor er indholdet blevet ændret med, mix-blend-modeså tekstens farver udelukkes fra baggrunden. Dette er blot en af ​​mange værdier for denne ejendom.

Der er et problem med Chrome 58+, hvor mix-blend-modedet ikke gengives på elementer, der er indstillet til en gennemsigtig . Den er blevet billetteret som udgave 711955 i Chrome, som tildeles på tidspunktet for denne skrivning. I mellemtiden er en simpel løsning at tildele en hvid (eller virkelig en hvilken som helst) baggrundsfarve til kropselementet.

Værdier

  • initial: standardindstillingen for ejendommen, der ikke indstiller en blandingstilstand.
  • inherit: et element arver blandingstilstanden fra dets overordnede element.
  • unset: fjerner den aktuelle blandingstilstand fra et element.
  • : dette er attributten for en af ​​blandingstilstandene nedenfor:
  • normal: denne attribut gælder ingen blanding overhovedet.
  • multiply: elementet ganges med baggrunden og erstatter baggrundsfarven. Den resulterende farve er altid så mørk som baggrunden.
  • screen: multiplicerer baggrunden, og indholdet supplerer derefter resultatet. Dette vil resultere i indhold, der er lysere end background-color.
  • overlay: multiplicerer eller viser indholdet afhængigt af baggrundsfarven. Dette er det omvendte i blandet tilstand med hårdt lys.
  • mørkere: baggrunden erstattes med indholdet, hvor indholdet er mørkere, ellers forbliver det, som det var.
  • lighten: baggrunden erstattes med indholdet, hvor indholdet er lysere.
  • color-dodge: denne attribut lyser baggrundsfarven for at afspejle indholdet.
  • color-burn: dette gør baggrunden mørkere, så den afspejler indholdets naturlige farve.
  • hard-light: afhængig af farven på indholdet, vil denne attribut skærm eller multiplicere det.
  • soft-light: afhængigt af farven på indholdet vil dette blive mørkere eller lysere.
  • difference: dette trækker den mørkere af de to farver fra den lyseste farve.
  • exclusion: ligner differencemen med lavere kontrast.
  • hue: skaber en farve med indholdet af indholdet kombineret med baggrundsmætning og lysstyrke.
  • saturation: skaber en farve med indholdets mætning kombineret med baggrundens nuance og lysstyrke.
  • color: skaber en farve med farven og mætning af indholdet og baggrundens lysstyrke.
  • luminosity: skaber en farve med lysstyrken på indholdet og baggrundens nuance og mætning. Dette er den omvendte coloregenskab.

Det er værd at bemærke, at indstilling af en anden blandingstilstand end normalvil generere en ny stablingskontekst, som derefter skal blandes med den stablingskontekst, der indeholder elementet.

Effekten af ​​disse værdier vises i nedenstående demo:

Mere information

  • Grundlæggende om CSS Blend-tilstande
  • mix-blend-mode på MDN
  • mix-blend-mode på W3C
  • En samling af CSS Blend Mode-demoer
  • Lær at kende CSS Blend Modes

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
41 32 Ingen 79 TP

Mobil / tablet

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