今天，因为众所周知的原因，很多网站都灰了。

可能你跟我一样聪明，早有耳闻置灰的实现很简单，比如你掘金，某乎，某条之流的实现：

（亲爱的掘金，为什么大家都是100%，你是95%呢？

当然也有某度，big-event-gray的类名言简意赅，而且它还写了一套专门的 CSS 样式，我辈楷模！

今天突然想水一篇文章，就浅学一下 filter 的那些神奇用法吧。

1. 置灰

就像某度那顾名思义的 class 名一样，当遇到一些 big event 时，网站需要做置灰处理，这时就可以使用 filter 属性的grayscale来实现。

如下代码片段，给 html 加上期望的灰度百分比就可以实现站点置灰效果。

html {
  filter: grayscale(100%);
}

2. 毛玻璃

毛玻璃效果，我们可以在 window 与 iOS 系统中找到它的身影，其实就是半透明、玻璃态效果。我们可以使用 filter 属性的blur方法来实现。

如下代码片段，我们在图片上添加一小片毛玻璃效果。

.glass {
	position: absolute;
  inset: 88px;
  border: 1px groove #f7f8ff;
  border-radius: 4px;
  background: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

直接在.glass上使用 filter 效果不太明显，我们借助伪元素 before 让效果更好些。

.glass::before {
	content: '';
  position: absolute;
  inset: 0;
  filter: blur(5px);
  background: inherit;
}

虽然效果看着也还勉强能接受，但其实毛玻璃效果更推荐的是使用backdrop-filter，它们的语法一模一样，但作用区域有所区别：

• filter 对当前元素使用滤镜效果
• backdrop-filter 对当前元素所在区域后面的内容应用滤镜效果

所以就可以直接在.glass上添加，而不需要伪元素。

.glass {
  position: absolute;
  inset: 88px;
  border: 1px groove #f7f8ff;
  border-radius: 4px;
  background: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(5px);
}

（⚠️：元素或其背景需要有透明度才能看到效果）

一起对比下二者的效果差异，其实还是很明显的。

3. 怀旧老照片

想做个怀旧照片墙，那不得不提到 filter 的另一个方法sepia。

可以通过调整百分比，让你的照片在原图与深褐色之间变换。

4.对比度

使用 contrast可以调整图片的对比度。

5. 饱和度

使用saturate可以调整图片的饱和度。

---

等等，等等，这些不都是当年我在美图秀秀玩过的吗？

岂不是说，我可以在线p图？

于是我偷懒上网冲浪找到一个站点，通过结合使用 filter 的所有方法，你可以搭配出任意自己满意的效果。

还有很多牛逼的效果，这篇文章赞比较多，建议各位去学习学习，我写这么多够了。