在前端开发中，会经常碰到一些图标需要通过css中filter属性来修饰，让同一张图标在鼠标经过时变成白色，这样就会减少同一张图标不用制作2种颜色来适配交互效果。

filter属性是在HTML页面中img元素上使用的，其他像背景调用【background-image】不要使用此属性，有时候使用不当会影响到其他元素的效果。

先看一下filter在本文中使用的主要滤镜：

图像转换为灰阶：grayscale(%)

调整图像亮度：brightness(%)

调整图像对比度：contrast(%)

demo场景：

01. 没有通过filter属性修饰前，图标颜色是灰色；

 

当鼠标移动上去：通过filter属性修饰后，图标颜色变为白色。

 

下面是html的DOM结构：

 

本文Demo测试下载【css-filter-demo】.rar

上一篇：百度编辑器上传图片后出现图片属性焦点无法编辑下文的解决方法

下一篇：PHP中如何操作数据库？