单色 CSS
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
假设你有一张照片想要展示在网页上的某个地方。这张照片色彩丰富，但你需要遵循严格的配色方案，可能是因为品牌指南，或者仅仅是因为你更喜欢某些颜色。
第一个念头可能是用你最喜欢的图像编辑软件（我用的是PC 上的Paint.NET ）打开照片，然后摆弄各种功能，直到照片看起来像你想要的那样。
过了一段时间，不知何故，配色方案发生了变化。也许是高层在参加完品牌重塑研讨会后从会议室出来，又或许你只是厌倦了淡紫色，决定把长春花蓝作为你的新宠。你发现网站上有数百张照片都需要重新编辑。为了避免这种情况，你应该直接提供原始照片，让CSS 滤镜来帮你完成剩下的工作。
如果使用grayscale滤镜，你会得到一张全是灰色的照片。如果你想要一张完全去饱和度的图像，这当然没问题。但如果你想要一张特定色调的单色图像，那就grayscale行不通了。正确的做法是，先应用一个sepia滤镜，将图像中每个像素的色调设置为大约 60°。然后你可以添加另一个滤镜来调整色调。
img {
filter: sepia() hue-rotate(123deg);
}
我创建了一个Pen 来演示这个效果。将色调选择器拖动到所需的颜色，然后复制生成的 CSS 代码。如果按住图片（或鼠标按钮），滤镜效果就会取消，显示原始图像。图片本身是从Unsplash随机下载的，查询条件为nature, water[此处应填写查询条件]。