css如何制作页面模糊

使用 backdrop-filter 属性

通过 backdrop-filter 属性可以直接为元素背后的区域添加模糊效果。该属性需要浏览器支持（如 Chrome、Edge、Safari）。示例代码：

.blur-background {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5); /* 可选：半透明背景增强效果 */
}

使用 filter 属性模糊元素

对元素本身应用模糊效果，适用于图片或特定区块。示例代码：

.blur-element {
  filter: blur(3px);
}

伪元素叠加模糊

通过伪元素覆盖目标区域并模糊，适合局部模糊场景。示例代码：

.blur-overlay {
  position: relative;
}
.blur-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

SVG 模糊滤镜

通过 SVG 定义滤镜并应用于 HTML 元素，适合复杂场景。示例代码：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <filter id="svg-blur">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

.svg-blur {
  filter: url(#svg-blur);
}

注意事项

• 模糊效果可能影响性能，尤其在移动端需谨慎使用。
• backdrop-filter 在不支持的浏览器中需提供降级方案。
• 模糊值（如 blur(5px)）可根据实际需求调整像素参数。