让图标变成白色，不要在火狐使用该属性，不然会失效

 

filter 属性详解

属性	名称	类型	说明
grayscale	灰度	值为数值	取值范围从0到1的小数(包括0和1)
sepia	褐色	值为数值	取值范围从0到1的小数(包括0和1)
saturate	饱和度	值为数值	默认是1，可以是小于1的小数，也可以大于1
hue-rotate	色相旋转	值为角度	0-360deg
invert	反色	值为数值	取值范围从0到1的小数(包括0和1) /*IE10*/
opacity	透明度	值为数值	取值范围从0到1的小数(包括0和1)
brightness	亮度	值为数值	默认是1，可以小于1(变暗)，可以大于1(变亮)
contrast	对比度	值为数字	默认是1，可以大于1，也可以小于1
blur	模糊	值为length	表示模糊半径，比如filter:blur(2px)/*IE10*/
drop-shadow	阴影	值为shadow()	写法类似css3 box-shadow，比如filter:drop-shadow(0,0,10px,black)
特别说明： 火狐、opera浏览器不支持filter属性 所以在写定义常用属性的时候如：半透明属性：opacity，则可以直接定义成opacity:.5;/*Opera9.0+、Firefox1.5+、Safari、Chrome*/

 以下出自链接>css中将图片改为白色的 |css 图片教程 | 刘大湿BLOG

img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: brightness(0%) invert(100%);
-webkit-filter: brightness(0%) invert(100%);
mix-blend-mode: difference;
}

上述代码中，使用了多种滤镜，包括grayscale(100%), brightness(0%), invert(100%)和mix-blend-mode: difference。这些滤镜的作用是将图片变成黑白色，并且反转颜色，最后使用混合模式difference将黑色部分变成白色。

需要注意的是，使用这种方法会将所有图片都变成白色。如果只想改变某个图片的颜色，可以给这个图片加上一个class，然后只对这个class进行样式修改。

.white {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: brightness(0%) invert(100%);
-webkit-filter: brightness(0%) invert(100%);
mix-blend-mode: difference;
}

这样，在HTML中给需要变成白色的图片加上class=”white”即可。

总之，使用CSS将图片变成白色是一种简单有效的方法，可以让网页设计更加美观。如果需要更多的图片处理方法，可以继续研究CSS中的滤镜和混合模式。