利用css修改图标颜色

利用css修改图标颜色

最近在写一个关于天气的小功能，发现一件有意思的事，我找到的图标颜色是黑色，所以使用之后效果例图如下：

但我想要的效果是这样的：

对于把图标颜色改变，我接触的只有css3里面的filter属性，filter滤镜中，有调整图像的对比度的contrast(%)，有调整色调的hue-rotate等等，把这些滤镜进行组合，进行色值变换，总会得到我们希望的颜色。
在这里，给大家推荐一个filter滤镜进行转换任意色的的在线工具。
点击这里进行跳转
则使用代码如下：
html

<span  id="weather-l"><img src="img/晴-天气.png" class="background-1"></span>

css

.background-1 {
    width: 100px;
    height: 100px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

即可得到想要的效果，通过之前的在线工具，可任意改变想要的颜色值
以上所述，均参考自张鑫旭大佬的博客，链接如下
点击这里进行跳转
弱弱菜鸡，不知所言