您始终可以将过滤器应用于元素以使其在灰度意义上变为单色
查看 CodePen 上 Chris Coyier 的 将图像单色化 。 ( @chriscoyier )
如果将它放在具有背景颜色的容器中并降低不透明度，则可以获得彩色单色效果。
查看 CodePen 上 Chris Coyier 的 将图像单色化 。 ( @chriscoyier )
Maarten van der Velde 写信说，与其降低不透明度，不如将它与 mix-blend-mode 结合并增强对比度
查看 CodePen 上 Chris Coyier 的 将图像单色化 。 ( @chriscoyier )
Amelia Bellamy-Royds 也 介绍了使用 SVG 颜色过滤器 来实现这一点，它提供了极大的控制能力。
查看 CodePen 上 Amelia Bellamy-Royds 的 SVG 过滤器 灰度 -> 反转单色颜色 。 ( @AmeliaBR )
另一种方法是将过滤器效果链接在一起，只需要对单个元素应用 CSS
.monochrome { filter: sepia(1) saturate(250%) hue-rotate(90deg); }
这将导致单色绿色图像。根据需要调整饱和度和色相旋转。
很棒。一个优雅的解决方案，非常容易实现。感谢您的发布。