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

为一张彩色图片增长染色效果变成灰度图片或者为灰度模式的图片增长染色效果变成彩色图片的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%);
}
复制代码

最终效果如图所示：

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