CSS中的整页模糊

在CSS中，要实现整页模糊效果，可以使用 backdrop-filter 属性。backdrop-filter 属性可以在元素的背景上应用滤镜效果，例如模糊、饱和度、对比度等。以下是一个简单的示例，实现整页模糊效果：

body {
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  z-index: -1;
}

在这个示例中，我们使用了 ::before 伪元素来创建一个覆盖在整个页面上的模糊层。background 属性设置为半透明的白色，可以根据需要更改颜色和透明度。backdrop-filter 属性设置为 blur(5px)，表示模糊半径为5像素。z-index 属性设置为-1，将模糊层放在其他元素的下方。

需要注意的是，backdrop-filter 属性在某些浏览器中可能不被支持，因此在实际应用中需要进行兼容性测试。此外，模糊效果可能会对性能产生一定的影响，因此需要根据实际情况权衡使用。