持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

准备

filter是css中一个属性，我们平常处理一些图片就可以用到它，它可以让我们的图片模糊，锐化，高亮等等的效果，我们经常看到有些网站为了纪念哀悼，会设置全黑，也是全局设置了这个属性，下面会讲到

ie是不支持这个属性的，大家慎用

大纲如下：

首先看看原图，网上随便找的：

接下来，我们用这张图片给大家演示下这个filter的强大之处

blur

给图片设置高斯模糊，值越大，图片就会越模糊，0就是没有效果

filter: blur(3px);

效果如下：

可以让图片看起来更亮或更暗，0%表示图片全黑，100%表示图片没变化，超过100%表示图片比原来更亮

filter:brightness(50%)

图片的对比度，0表示图片会全黑，100%，图片不会变

filter:contrast(50%)

给图片一个阴影效果，这个阴影是在图片的下面的

filter: drop-shadow(8px 8px 10px #333)

将图片转为黑色，0%没有变化，100%代表全灰，这也是我们开头说的，网站设置这个属性来给网站变灰纪念哀悼

filter: grayscale(100%);

给图像应用色相旋转,0deg表示图片没变化

filter: hue-rotate(50deg);

反转输入图像，类似曝光的意思，100%表示完全反转，0%就没有效果

filter:invert(100%)

图像的透明度，0%表示完全透明

filter: opacity(30%);

转换图像饱和度。100%表示无变化，0%表示完全不饱和，大于100%表示饱和度增高，未设置时，值为1

  filter: saturate(200%);

将图像转换为深褐,100%表示完全深褐色的，0%表示无变化，未设置时，值为0

  filter: sepia(50%);