【前端开发】用css修改图片的颜色教程

对于把图标颜色改变，我接触的只有css3里面的filter属性，filter滤镜中，有调整图像的对比度的contrast(%)，有调整色调的hue-rotate等等，把这些滤镜进行组合，进行色值变换，总会得到我们希望的颜色。

在这里，给大家推荐一个filter滤镜进行转换任意色的的在线工具。
生成css网站：https://www.zhangxinxu.com/sp/filter.html

则使用代码如下：
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%);
} 

即可得到想要的效果，通过之前的在线工具，可任意改变想要的颜色值

效果

修改之前

 

 修改之后