使用css快速实现毛玻璃模糊效果

本文将以两种方式分别介绍关于css模糊效果的两种实现方式
参考文档：MDN

backdrop-filter

首先我们通过codePen看一下通过backdrop-filter实现的效果

在css中添加backdrop-filter属性

.drop {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

backdrop-filter属性可以让我们为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

filter

接下来我们在通过codePen看一下通过filter实现的效果

在css中添加filter属性

.wrap {
  filter: blur(4px)
}

filter属性将模糊或颜色偏移等图形效果应用于元素。这里运用了filter的blur()函数使图片或者元素进行高斯模糊效果

backdrop-filter VS filter

	backdrop-filter	filter
作用对象	其元素后面区域	元素本身
无效对象	元素本身	当前元素外的其他元素，不包含元素内部
注意事项	必须使元素或其背景至少部分透明	-
	对伪元素使用无效（after、before）	-