CSS修改图片颜色？

版权声明：本文为博主（风轻云淡）原创文章，未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/83658289

图标是前端页面中不可避免要用到的，常用图标的形式也有多种：图片、字体、SVG。目前越来越多的会使用SVG和字体图标，其中一个原因就是字体和SVG都能动态改变颜色，而图片却不能，因为很多情况下我们需要对同一个图标进行不同的颜色显示。

那么，图片究竟可不可以改变颜色呢？通常我们可以再 PS 中修改一个图片的颜色，但是 在 HTML 中还真没听说过。

这可能是咱们孤陋寡闻了，还真就这样一个神奇的CSS属性

<div class="box">
    <span class="icon"></span>
</div>

.icon{
    width:100px;
    height:100px;
    display:inline-block;
    background-image:url('icon.jpg');
    background-size:100% 100%;
}

这样你会看到一个图标，我们通过背景图像的形式指定了一张图片，从而达到了图标的效果

实际上，通过 background-image 指定的图像不仅可以是一张图片，还可以是渐变 linear-gradient , 而且是可以指定多个图像的，所有图像已 Z 方向堆叠，并且先指定的图像会在后指定的图像上面。

所以如果我们在给背景图像再加上一个渐变色

background-image:url('icon.jpg'), linear-gradient(#f00, #f00);

结果并没有变化，因为这里第一个设置的是图片，所以我们只看到图片，渐变色被遮挡了，
background-blend-mode  这是用来定义背景图片的混合方式，于是我们加上该样式

background-image:url('icon.jpg'), linear-gradient(#f00, #f00);
background-blend-mode:lighten;

就变成了下面的效果

当然 background-blend-mode 还有其他的取值，可以挨着试试看效果。
上面我们用渐变色模拟了纯色，如果是真的渐变色呢？

background-image:url('icon.png'), linear-gradient(#f00, #000);
background-blend-mode:multiply;