作者: 咸鱼技术联盟核心成员 - 万章
亮度
属性名称
filter:brightness(倍数); 当倍数值大于 1 的时候元素会变亮, 小于 1 的时候元素会变暗 该属性的作用为调整元素当前的亮度, 一般来说可以适用于鼠标悬浮到某元素时的提醒作用
对比度
属性名称
filter:contrast(百分比); 所谓对比度, 简单理解的话就是一个区域里面每个颜色都会变得格外显眼, 黑的更黑, 白的更白
当元素只有一种颜色时, 该属性看效果和变亮看上去差不多, 如果我们给该元素设置一个背景图片的话, 那就是另一回事了
模糊
属性名称
filter:blur(模糊半径); 给图像设置高斯模糊模糊半径的值设定高斯函数的标准差, 或者是屏幕上以多少像素融在一起, 所以值越大越模糊;
色调
属性名称: 灰色色阶
filter:grayscale(); 该属性的作用较为简单, 就是将一个颜色复杂的区域改造成一个只有黑白二色的区域圆括号里面的值定义转换的比例值为 100% 则完全转为灰度图像, 值为 0% 图像无变化值在 0% 到 100% 之间, 则是效果的线性乘子若未设置, 值默认是 0;
属性名称: 褐色色阶
filter:sepia(); 该属性的作用同上, 都是将某个区域的颜色进行简化, 该属性会将一个颜色丰富的区域变成一种老黑白照片效果, 让图片有一种轻微泛黄的样子
饱和度
属性名称
filter:saturate(%); 转换图像饱和度圆括号里面的值定义转换的比例值为 0% 则是完全不饱和, 值为 100% 则图像无变化其他值, 则是效果的线性乘子超过 100% 的值是允许的, 则有更高的饱和度 若值未设置, 值默认是 1 随着饱和度的增加, 颜色就会更清楚饱和度越小, 颜色就会越淡;
该图片随着饱和度的增加, 颜色变得越来越鲜艳
以上为滤镜属性中使用较多的属性值, 此外还有一些使用较少的属性值, 比如: drop-shadowhue-rotateinvert 等, 如果各位小伙伴有兴趣的话, 可以对这些属性深入的研究一下
来源: http://www.jianshu.com/p/f989a4a035c5