CSS filter属性：要不来口PS的饭？

最近写的动画中用到filter属性越来越多，整的也越来越花俏，一些简单PS效果可通过此属性实现。哦错了，不应该说PS，大家应该用到都是高级的Photoshop吧。

在这和大家分享下它的各个函数的效果图，感兴趣的自己脱了小马甲试试不同颜色衣服。

语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

根据个人需求对函数进行组合，不过要注意顺序对最终效果对影响，在这我们仅对单个滤镜函数进行说明展示，自己可以组合练习下。

blur模糊滤镜（Npx）

image

值越大越模糊（负数无效），但是边缘区也会模糊。实际运用中根据个人的需求情况进行调整，可以对父元素设置超出范围隐藏overflow:hidden。效果如下：

image

brightness亮度(%或数字)

改变亮度。如果值是0%或0，图像会全黑。值是100%或1，则图像无变化。值超过100%或者是大于1的数字，图像会比原来更亮。如果没有设定值，默认是1。图为brightness(20%)效果

image

contrast对比度(%或数字)

调整对比度。如果值是0%或0，图像会全灰。值是100%或1，则图像无变化。值超过100%或者是大于1的数字，对比度增加。如果没有设定值，默认是1。图为contrast(40%)效果

image

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

阴影效果，类似于box-shadow,图为drop-shadow(2px 4px 4px rebeccapurple)效果

image

grayscale灰度(%或数字)

将图像转换为灰度图像。值为100%完全转为灰度图像，值为0%图像无变化。若未设置，值默认是0。也可以写0-1之间的小数。图为grayscale(1)效果

image

hue-rotate色相旋转(deg)

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

<img src="https://img2.baidu.com/it/u=3553870032,2142281922&fm=26&fmt=auto&gp=0.jpg" style="width:150px"/>

图为hue-rotate(40deg)效果：

image

invert反转图像(%或数字)

图像反转，值在0 ~ 1或者0 ~ 100%之间，当为1或100%时为完全反转。图为invert(75%)效果：

image

opacity透明度(%或数字)

图像的透明度，跟css opacity效果类似。值为0%则是完全透明，值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%，大于1没有效果。图为opactiy(40%)效果

image

saturate饱和度(%或数字)

调整饱和度。取值大于等于0，当取值为0时完全不饱和效果和grayscale(1)类似。值为100%则图像无变化。大于100%，则饱和度增高。图为saturate(200%)效果

image

sepia褐色效果（%或数字）

褐色效果，值也在0~1之间， 0无效果，1完全变褐。有旧照片的效果。图为sepia(40%)效果

image

图片来源：https://images.unsplash.com/photo-1631027716785-1886f6ba429b?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60