图片实现染色效果（基于滤镜和混合模式）

法一：基于滤镜
sepia()，它会给图片增加一种降饱和度的橙黄色染色效果。
如果我们想好的主色调的饱和度比这高，可用saturate()滤镜来给每个像素提升饱和度。
若不希望把图片调为橙黄色调，而是稍深的亮粉色，还需再添加一个hue-rotate()滤镜，把每个像素的色相以指定的度数进行偏移。
例子：

<img src="husky.jpeg" alt=""></body>

img {
    transition: .5s filter;
    filter: sepia(1) saturate(4) hue-rotate(295deg);
}

img:hover,
img:focus {
    filter: none;
}

效果如下：

法二：混合模式
“混合模式”控制了上层元素的颜色与下层颜色进行混合的方式。
用它来实现染色效果时，需用到的混合模式是luminosity
这种luminosity混合模式会保留上层元素的HSL亮度信息，并从它的下层吸取色相饱和度信息。
需要的属性：
mix-blend-mode 可为整个元素设置混合模式
background-blend-mode 可为每层背景单独指定混合模式
那么有两种实现方式：

1. 把图片包裹在一个容器中，并把容器的背景色设置为我们想要的主色调；
2. 不用图片元素，而用div元素，把这个元素的第一层背景设置为要染色的图片，并把第二层背景设置为我们想要的主色调。

例子：

<div class="tinted-image" style="background-image: url(husky.jpeg);"></div>

.tinted-image {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-color: hsl(335, 100%,50%);
    background-blend-mode: luminosity;
    transition: .5s background-color;
}
.tinted-image:hover {
    background-color: transparent;
}

效果如下：

涉及到单词：
sepia [ˈsiːpiə] 深褐色，棕褐色
saturate [ˈsætʃəreɪt] 饱和的
hue 颜色; 色度; 色调;
luminosity [ˌluːmɪˈnɒsəti] 亮度
blend 混合

参考：《css揭秘》