CSS 设置高斯模糊效果

本文主要介绍在前端里比较重要的一个效果——高斯模糊效果，也有人称为毛玻璃特效。在Mac和Windows系统样式上也都在使用模糊效果。下面聚焦于Web前端中的模糊效果开发。

css

模糊效果有两个主要用途，一个是对当前块的内容进行模糊；另一个是对当前块背景进行模糊，但内容是清晰可见的。这对应着css的两个属性，前者是filter，后者则为backdrop-filter。

两个属性的用法几乎一致，属性本意为滤镜，系统本身已经预设了一些常用的滤镜效果，对于特殊效果，可能会需要使用到svg来实现。

请看下面的代码

header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: saturate(180%) blur(20px);
}

header元素是我们经常使用到的导航栏元素，上述代码是将其背景高斯模糊，并且固定在顶部，关于固定顶部可以查看这里