Monotone et bilde med CSS - CSS-triks

Anonim

Du kan alltid bruke et filter på et element for å gjøre det ensformig i gråtoneforstand:

Se Pen Monotone-ing an Image av Chris Coyier (@chriscoyier) på CodePen.

Hvis du legger det i en beholder med bakgrunnsfarge og senker opasiteten, kan du få en farget monotone effekt:

Se Pen Monotone-ing an Image av Chris Coyier (@chriscoyier) på CodePen.

Maarten van der Velde skrev inn for å si at i stedet for å senke opasiteten, kan vi kombinere det med mix-blend-modeog blåse ut kontrasten:

Se Pen Monotone-ing an Image av Chris Coyier (@chriscoyier) på CodePen.

Amelia Bellamy-Royds dekket også ved hjelp av SVG-fargefiltre for å gjøre dette, som har utrolig mye kontroll:

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