模糊背景 - CSS

在 CSS 中，我们可以通过使用 backdrop-filter 属性来实现模糊背景效果。使用这一属性，我们可以将一个元素的背景模糊，使其看起来更加柔和和渐变。

.div {
  backdrop-filter: blur(8px); /* 背景模糊效果 */
  background-color: rgba(255, 255, 255, 0.5); /* 背景颜色透明度 */
}

上述代码中，backdrop-filter 属性用于指定背景过滤效果，使用 blur() 函数设置模糊半径为 8 像素。另外，我们可以通过 background-color 属性为元素设定背景颜色，并使用 rgba() 函数设置颜色的 alpha 通道透明度，以便实现柔和的背景效果。

使用这些属性，我们可以创建各种各样的背景效果，如模糊图片、对话框模糊背景等。

请注意，backdrop-filter 属性目前仅在部分浏览器中支持，包括最新版本的 Safari 和 Chrome 浏览器。因此，在使用时需进行相应的兼容性处理。

参考链接：

• CSS backdrop-filter