实现图片染色效果的三种方式

为一张彩色图片增加染色效果变成灰度图片或者为灰度模式的图片增加染色效果变成彩色图片的css实现方式，有基于滤镜，基于混合模式的实现方式。

基于滤镜的实现方式

我们来为彩色图片添加一个灰色的染色效果，可以使用多个滤镜组合的方式来实现。 首先使用的是sepia()，它会给图片增加一种深褐色的染色效果，值为100%则完全是深褐色，值为0%图像无变化，若值在0-100，则是效果的线性乘子。现在的图片是呈现深褐色。

filter: sepia(100%);
复制代码

我们还需要更高的主色调饱和度，接下来使用saturate() 滤镜来给每个像素提升饱和度，saturate的值0-100%分别表示完全不饱和与图片无变化，若超过100%则有更高的饱和度。我们将saturate的值设为200%，这两个滤镜的组合会让图片具有一种橙黄色的染色效果。

filter: sepia(100%) saturate(200%);
复制代码

但是此时还不能满足我们的效果，我们还需要使用另外一个滤镜hue-rotate() 滤镜，把每个像素的色相以指定的度数进行偏移。我们将值设置在160deg左右，即可实现一个灰色的染色效果，并且添加动画效果。

<img src="test.jpg" alt="test" />
复制代码

css实现：

img {
    transition: .5s filter;
    filter: sepia(100%) saturate(200%) hue-rotate(160deg);
}
img: hover {
    filter: none;
}
复制代码

效果如下图所示：

基于混合模式的实现方式

接下来我们来给图片添加红色的染色效果，我们需要用到的是luminosity混合模式,这种混合模式会保留上层元素的 HSL 亮度信息，并从它的下层吸取色相和饱和度信息。

要对一个元素设置混合模式，有两个属性可以派上用场:mix-blend- mode ，background-blend-mode 。 第一种属性: mix-blend- mode可以为整个元素设置混合模式，使用该属性需要把图片包裹在一个容器中，并把容器的背景色设置为我们想要的主色调。

<p>
    <img src="test.jpg" alt="test" />
</p>
复制代码

css实现 ：

p{
    width: 400px;
    height: 300px;
    background: hsl(335, 100%, 50%);
}
img {
    width: 100%;
    height: 100%;
    mix-blend-mode: luminosity;
}
复制代码

第二种属性：background-blend-mode 可以为每层背景单独指定混合模式。使用该属性不用图片元素，而是用

元素——把这个元素的第一层背景设置为要染色的图片，并把第二层的背景设置为我们想要的主色调。

<div class="test-image">
复制代码

css实现：

.test-image {
    width: 400px;
    height: 300px;
    background-image:url(test.jpg);
    background-size: cover;
    background-color: transparent;
    background-blend-mode: luminosity;
    transition: .5s background-color;
}
.test-image:hover {
    background-color: hsl(335, 200%, 50%);
}
复制代码

最终效果如图所示：

不过，这两种方法都不够理想。它们的主要问题在于： 第一种属性的实现不能实现动画效果 第二种属性的实现，在语义上，这个元素并不是一张图片，因此并不会被读屏器之类的设备读出来