css将png图片转换为指定颜色

问题场景

前端开发遇到导航栏的图标默认显示是一种颜色，当鼠标移动到上面又是另一种颜色，但是UI切图的图标是png格式的，el-icon的组件又无法引入，只能使用el-image组件引入，此时却不想如何修改动态修改png图标。

这是菜单栏的默认状态下，图标（此处为png图片）的颜色：

这是鼠标悬浮时或当前菜单栏被选中时，图片的颜色：

这时我们就需要css的一个属性，filter属性，什么是filter属性？

filter属性

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

css语法

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

提示: 使用空格分隔多个滤镜。

Filter 函数

注意