css filter属性(滤镜)

filter(滤镜)属性，是CSS3中的一个属性，不支持IE。

模糊滤镜 blur(Npx)

设置高斯模糊

• 值越大越模糊，默认是0，不模糊

 filter: blur(4px);

亮度 brightness(%)

• 值是0%的，图像会全黑。值是100%，图像不变。
• 1(100%)以内可以用%或小数，默认1(100%)

filter: brightness(2);

对比度 contrast(%)

• 值是0%的，图像会全黑。值是100%，图像不变。
• 1(100%)以内可以用%或小数，默认1(100%)

filter: contrast(80%);

投影 drop-shadow(x偏移  y偏移   模糊范围   颜色)

类似box-shadow，但通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

 filter: drop-shadow(2px 10px 0 rgba(255,0,0,0.5));

灰度 grayscale(%)

• 值为100%则完全转为灰度图像，值为0%图像无变化
• 若未设置，值默认是0。也可以写0-1之间的小数。

 filter: grayscale(0.5);

色相旋转 hue-rotate(deg)

• 让图像中的颜色，在色相环中做对应的旋转
• 值为0deg，则图像无变化
• 默认值是0deg。该值没有最大值，超过360deg的值相当于又绕一圈

filter: hue-rotate(125deg);

反转图像 invert(%)

• 100%是完全反转。0%则图像无变化
• 值在0%和100%之间，则是效果的线性乘子
• 默认是0

 filter: invert(100%);

透明度 opacity(%)

与已有的opacity属性很相似，一些浏览器为了提升性能会提供硬件加速

• 值为0%则是完全透明，值为100%则图像无变化
• 0-100%之间则是部分透明
• 也可以用0-1之间的小数替代%

饱和度saturate(%)

• 值为0%则是完全不饱和，值为100%则图像无变化
• 大于100%，则饱和度增高，色彩就会变重

filter: saturate(200%);

深褐色(%)

• 值为100%则完全是深褐色的，值为0%图像无变化
• 值在0%到100%之间，则是效果的线性乘子
• 默认是0。

filter: sepia(100%);

结合使用

注意: 顺序是非常重要的，如果顺序变了，最后的效果也会发生变化。

 filter: invert(100%) sepia(100%) saturate(300%) ;

参考： CSS3中强大的filter(滤镜)属性_filter在css-优快云博客