用css改变png/svg背景图标颜色

用css改变png/svg图标颜色

1. filter 滤镜

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN

使用 filter grayscale 可以将任意图片灰度化，从而达到改变颜色的目的。

<img src="http://onceoa.com/ask/img/oncedoc.jpg" width="100" />
<span style="filter: grayscale(100%);">
  <img src="http://onceoa.com/ask/img/oncedoc.jpg" width="100"/>
</span>

效果：

另外 filter 还有

filter: none        
    | blur() 
    | brightness() 
    | contrast() 
    | drop-shadow() 
    | grayscale() 
    | hue-rotate() 
    | invert() 
    | opacity() 
    | saturate() 
    | sepia() 
    | url();

2. 内嵌 SVG 图标: 使用 color

对于svg 中的 path 对象，可通过外部CSS的color来改变颜色，比如：

<div style="color:#ff0000; width: 90px">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16" id="alarm-fill"><path d="M6 .5a.5.5 0 01.5-.5h3a.5.5 0 010 1H9v1.07a7.001 7.001 0 013.274 12.474l.601.602a.5.5 0 01-.707.708l-.746-.746A6.97 6.97 0 018 16a6.97 6.97 0 01-3.422-.892l-.746.746a.5.5 0 01-.707-.708l.602-.602A7.001 7.001 0 017 2.07V1h-.5A.5.5 0 016 .5zm2.5 5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5zM.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM11.613 1.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z"></path></svg>
</div>

效果

对于SVG已经指定了 fill 填充颜色的图案，可以通过CSS来复写svg的填充颜色，可达到同样的效果：

.bi-alarm-fill path {
    fill: #ff0000
}

3. 使用引用 svg 图标: mask

在HTML中嵌入SVG会增加HTML尺寸，浏览器也无法对其缓存，此时可使用 mask 属性。 假如我们需要在背景中使用这个图标: http://ourjs.com/file/view/ourjs/2020/alarm.svg，并改变其颜色。

CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色作为背景色，然后原始图标作为遮罩图片，效果就出来了。

<style>
.alarm-bg {
    display: inline-block;
    width: 60px;
    height: 60px;
    -webkit-mask: url(http://ourjs.com/file/view/ourjs/2020/alarm.svg) no-repeat;
}

.bg1 {
    background: linear-gradient(to right, red, yellow, green);
}

.bg2 {
    background: #ff0;
}
</style>


<div class="alarm-bg bg1"></div>
<div class="alarm-bg bg2"></div>

效果