猪头少年的博客
发布时间：2021-05-17
# Apple中的模糊效果 本文主要介绍在前端里比较重要的一个效果——高斯模糊效果，也有人称为毛玻璃特效。在Mac和Windows系统样式上也都在使用模糊效果。下面聚焦于Web前端中的模糊效果开发。 ## css 模糊效果有两个主要用途，一个是对当前块的内容进行模糊；另一个是对当前块背景进行模糊，但内容是清晰可见的。这对应着css的两个属性，前者是**filter**，后者则为**backdrop-filter**。 两个属性的用法几乎一致，属性本意为滤镜，系统本身已经预设了一些常用的滤镜效果，对于特殊效果，可能会需要使用到svg来实现。 请看下面的代码 ```css header { position: sticky; top: 0; background: rgba(255, 255, 255, 1); backdrop-filter: saturate(180%) blur(20px); } ``` header元素是我们经常使用到的导航栏元素，上述代码是将其背景高斯模糊，并且固定在顶部，关于固定顶部可以查看这里