问题场景
前端开发遇到导航栏的图标默认显示是一种颜色，当鼠标移动到上面又是另一种颜色，但是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();
提示: 使用空格分隔多个滤镜。
