Monoton en bild med CSS - CSS-tricks

Anonim

Du kan alltid använda ett filter på ett element för att göra det monotont i gråskala:

Se penna Monotone-ing en bild av Chris Coyier (@chriscoyier) på CodePen.

Om du lägger det i en behållare med bakgrundsfärg och sänker opaciteten, kan du få en färgad monoton typ av effekt:

Se penna Monotone-ing en bild av Chris Coyier (@chriscoyier) på CodePen.

Maarten van der Velde skrev in för att säga att i stället för att sänka opaciteten kan vi kombinera det med mix-blend-modeoch blåsa ut kontrasten:

Se penna Monotone-ing en bild av Chris Coyier (@chriscoyier) på CodePen.

Amelia Bellamy-Royds täckte också med SVG-färgfilter för att göra detta, vilket har en fantastisk kontroll:

Se pennens SVG-filter grå -> Invertera svartvit färg av Amelia Bellamy-Royds (@AmeliaBR) på CodePen.