css如何制作页面模糊

使用 backdrop-filter 属性

通过 backdrop-filter 属性可以直接对元素背后的区域应用模糊效果。该属性支持多种滤镜效果，包括 blur()。

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

使用 filter 属性

filter 属性可以对元素本身应用模糊效果。如果需要对整个页面模糊，可以将该属性应用于 body 或根元素。

body {
  filter: blur(5px);
}

创建覆盖层模糊效果

通过伪元素或额外元素覆盖页面内容，并对覆盖层应用模糊效果，实现局部或全局模糊。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  z-index: 100; /* 确保覆盖其他内容 */
}

结合透明度和模糊

通过调整 opacity 或 rgba 背景色，增强模糊效果的视觉表现。

.blur-with-opacity {
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
}

动态模糊效果

使用 CSS 动画或 JavaScript 动态调整模糊强度，实现交互效果。

@keyframes pulse-blur {
  0% { filter: blur(0px); }
  50% { filter: blur(5px); }
  100% { filter: blur(0px); }
}

.animated-blur {
  animation: pulse-blur 2s infinite;
}

浏览器兼容性提示

backdrop-filter 在部分旧版本浏览器中可能不支持，可以通过 @supports 检测并回退。

@supports (backdrop-filter: blur(5px)) {
  .blur-background {
    backdrop-filter: blur(5px);
  }
}

性能优化

过度使用模糊效果可能影响页面性能，尤其是在低端设备上。建议限制模糊范围或强度，或通过 will-change 提示浏览器优化渲染。

.optimized-blur {
  backdrop-filter: blur(2px);
  will-change: backdrop-filter;
}