前言
“说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。”
你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。
强大的 CSS:filter
CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN
CSS标准里包含了一些已实现预定义效果的函数。
filter: none
| blur()
| brightness()
| contrast()
| drop-shadow()
| grayscale()
| hue-rotate()
| invert()
| opacity()
| saturate()
| sepia()
| url();
filter: none
没有任何效果，默认filter就为none
filter:blur( ) 高斯模糊
给图像一个高斯模糊效果，length值越大，图像越模糊
我们来尝试一下
img
{
filter:blur(2px);;
}
brightness(%) 线性乘法
可以让图片看起来更亮或者更暗
img {
filter:brightness(70%);
}
contrast(%) 对比度
调整图像的对比度。
img
{
filter:contrast(50%);
}
drop-shadow(h-shadow v-shadow blur spread color)
给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了”inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速
利用这个方案，我们其实改变类似于一些图标的颜色，比如黑色的图标变成蓝色的图标。
PNG格式小图标的CSS任意颜色赋色技术
