Sie können immer einen Filter auf ein Element anwenden, um es im Graustufen-Sinne monoton zu machen
Siehe den Pen Monotone-ing an Image von Chris Coyier (@chriscoyier) auf CodePen.
Wenn Sie dies in einen Container mit einer Hintergrundfarbe setzen und die Deckkraft verringern, können Sie einen farbigen Monoton-Effekt erzielen
Siehe den Pen Monotone-ing an Image von Chris Coyier (@chriscoyier) auf CodePen.
Maarten van der Velde schrieb uns, dass wir anstatt die Deckkraft zu verringern, diese mit mix-blend-mode und dem Aufblasen des Kontrasts kombinieren können
Siehe den Pen Monotone-ing an Image von Chris Coyier (@chriscoyier) auf CodePen.
Amelia Bellamy-Royds behandelte auch die Verwendung von SVG-Farbfiltern, um dies zu tun, was eine erstaunliche Kontrolle bietet
Siehe den Pen SVG Filters Gray -> Invert Monochrome Color von Amelia Bellamy-Royds (@AmeliaBR) auf CodePen.
Eine weitere Möglichkeit, dies zu tun, die nur die Anwendung von CSS auf ein einzelnes Element erfordert, ist das Verketten von Filtereffekten
.monochrome { filter: sepia(1) saturate(250%) hue-rotate(90deg); }
Dies führt zu einem monochromen grünen Bild. Ändern Sie Sättigung und Farbton wie gewünscht.
Ausgezeichnet. Eine elegante Lösung, die super einfach zu implementieren war. Danke fürs Posten.