需求场景
在制作菜单时，未增加响应效果，往往会加入鼠标移入移出时字体和图标进行变色的效果，字体的颜色变化比较好控制，通过color便可以设置，但如果图标是使用的图片，往往要一个图标制作两份不同颜色的图片，还需要javascript代码进行动态替换，比较繁琐。所以在项目中我们寻求一种比较简单、易于需求变更后进行维护的方式。
使用css filter进行实现
准备图片
假设我们的原始图片主色调为 #1296DB
制作一个简单的无背景色的横向菜单
为菜单添加背景(大多菜单栏都会有背景)
ul.horMenu {
list-style: none;
margin: 0;
padding: 0;
background-color: #5C9CCC;
}
ul.horMenu > li {
display: inline-block;
height: 32px;
padding: 0 8px;
line-height: 32px;
cursor: pointer;
}
ul.horMenu > li > img {
height: 32px;
width: 32px;
padding: 8px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
ul.horMenu > li > span {
color: white;
display: inline-block;
vertical-align: top;
}
效果图：
此时，我们的图片已经与背景搭配的不是那么协调。
通过css filter改变图片颜色为白色 主要通过filter: brightness(100);语句：
ul.horMenu > li > img {
height: 32px;
width: 32px;
padding: 8px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
filter: brightness(100);
}
之后菜单效果为：
添加菜单移入移出效果，鼠标移入背景变为浅色，字体和图标变为#1296DB
ul.horMenu > li:hover {
background-color: #E6F7FF;
}
ul.horMenu > li:hover img {
filter: brightness(0);
filter: grayscale(0);
}
ul.horMenu > li:hover > span {
color: #1296DB;
}
图片部分主要是搭配使用：filter: brightness(0); filter: grayscale(0);
最终效果：
注意：filter属性在老旧IE浏览器下并为得到很好的支持，因此使用时一定要注意。
