开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
在平时的工作需求中，我们经常会遇到要给图片上色的需求，比如一个褪色的头像，鼠标放在上上面之后恢复其原本的颜色，当然最笨的方法是准备两个图片分别显示，但可能会遇到网络问题导致功能无法实现，或是使用万能的canvas，但是性能上又可能存在问题，实际上，使用CSS就可以解决这个需求，而且可以选用两种不同的方案。
距离来说，我们需要解决这样一个需求，这是一张平平无奇的妹子图：
而我们要将其风格化成老照片的风格，这时候，我们可以选择采用滤镜的方式：
filter: sepia(1) saturate(4);
这里选用的是两个滤镜的组合，sepia可以降低整个画面的饱和度实际上就是对整个画面的色相进行收敛，saturate则是用来提升画面中主色调的饱和度，经过前一个步骤去色之后，saturate会让画面呈现金黄色的感觉：
关于sepia和saturate的更多内容可以查阅MDN
第二种发难则是采用混合模式，对你没有听错，这个经常出现在PhotoShop中，各个图层之间层叠方式的功能，的确也可以在CSS中实现，要对一个元素设置混合模式，有两个属性可以派上用场：mix-blend-mode 可以为整个元素设置混合模式，background-blend-mode可以为每层背景单独指定混合模式，但是这两种方式各有缺点：
- 使用
mix-blend-mode：需要把图片包裹在一个容器中，并把容器的背景色设
置为我们想要的主色调，这会多出一个DOM元素，性能上可能有影响，而且两个属性要在两个元素上分别设置，可读性很差 - 使用
background-blend-mode：不用图片元素，而是用一个<div>把这个元素的
第一层背景设置为要染色的图片，并把第二层的背景设置为我们想要的主色调。这种方式的确不会多出一个DOM元素，但是采用背景的方式来展现图片，就只能把图片的大小写死，而且在SEO方面会存在不少问题
我们以第一种方式为例：
<div style="background:#9f9400;display:inline-block;">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/462e4a6f03fe48c08f771935a77cad6d~tplv-k3u1fbpfcp-watermark.image?"/>
</div>
img {
mix-blend-mode: luminosity;
}
在两个不同的DOM上，一个设置背景颜色，一个设置混合模式，呈现出了这样的效果：
