Monotone ein Bild mit CSS - CSS-Tricks

Anonim

Sie können jederzeit einen Filter auf ein Element anwenden, um es im Graustufensinn monoton zu machen:

Sehen Sie sich den Stift an, der ein Bild von Chris Coyier (@chriscoyier) auf CodePen monotonisiert.

Wenn Sie dies in einen Behälter mit Hintergrundfarbe legen und die Deckkraft verringern, können Sie einen farbigen monotonen Effekt erzielen:

Sehen Sie sich den Stift an, der ein Bild von Chris Coyier (@chriscoyier) auf CodePen monotonisiert.

Maarten van der Velde schrieb, dass wir die Deckkraft nicht verringern, sondern mit mix-blend-modedem Kontrast kombinieren und ihn ausblasen können:

Sehen Sie sich den Stift an, der ein Bild von Chris Coyier (@chriscoyier) auf CodePen monotonisiert.

Amelia Bellamy-Royds behandelte dazu auch SVG-Farbfilter, die eine erstaunliche Menge an Kontrolle bieten:

Siehe den Stift SVG-Filter Grau -> Monochrome Farbe invertieren von Amelia Bellamy-Royds (@AmeliaBR) auf CodePen.