Monotone et billede med CSS - CSS-tricks

Anonim

Du kan altid anvende et filter på et element for at gøre det monotone i gråtoneforstand:

Se Pen Monotone-ing et billede af Chris Coyier (@chriscoyier) på CodePen.

Hvis du lægger det i en beholder med baggrundsfarve og sænker opaciteten, kan du få en farvet monoton slags effekt:

Se Pen Monotone-ing et billede af Chris Coyier (@chriscoyier) på CodePen.

Maarten van der Velde skrev ind for at sige, at i stedet for at sænke opacitet, kan vi kombinere det med mix-blend-modeog blæse kontrasten ud:

Se Pen Monotone-ing et billede af Chris Coyier (@chriscoyier) på CodePen.

Amelia Bellamy-Royds dækkede også ved hjælp af SVG-farvefiltre til at gøre dette, hvilket har en utrolig stor kontrol:

Se pennens SVG-filtre grå -> Inverter monokrom farve af Amelia Bellamy-Royds (@AmeliaBR) på CodePen.