Monotonia obrazu za pomocą CSS - CSS-Tricks

Anonim

Zawsze możesz zastosować filtr do elementu, aby był monotonny w skali szarości:

Zobacz Pen Monotone-ing an Image autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Jeśli umieścisz to w pojemniku z kolorem tła i zmniejszysz krycie, możesz uzyskać kolorowy, monotonny efekt:

Zobacz Pen Monotone-ing an Image autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Maarten van der Velde napisał, że zamiast zmniejszać krycie, możemy to połączyć z mix-blend-modekontrastem:

Zobacz Pen Monotone-ing an Image autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Amelia Bellamy-Royds omówiła również użycie w tym celu filtrów kolorów SVG, które mają niesamowitą kontrolę:

Zobacz filtry SVG w piórze Szary -> Odwróć kolor monochromatyczny autorstwa Amelii Bellamy-Royds (@AmeliaBR) na CodePen.