css如何制作页面模糊

使用 CSS 滤镜实现模糊效果

通过 filter 属性中的 blur() 函数可以快速实现元素模糊效果。模糊半径值越大，模糊程度越高。

.blur-effect {
  filter: blur(5px); /* 模糊半径设置为5像素 */
}

背景模糊（毛玻璃效果）

结合 backdrop-filter 属性可以实现背景模糊，常用于模态框或卡片设计。注意浏览器兼容性。

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

部分区域模糊

通过伪元素或绝对定位实现局部模糊，需配合 overflow: hidden 控制模糊范围。

.partial-blur {
  position: relative;
  overflow: hidden;
}
.partial-blur::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 30%;
  width: 200px;
  height: 100px;
  filter: blur(8px);
  background: inherit;
}

动态模糊效果

结合 CSS 动画或过渡实现模糊程度变化，适合交互场景。

.dynamic-blur {
  filter: blur(0);
  transition: filter 0.3s ease;
}
.dynamic-blur:hover {
  filter: blur(3px);
}

性能优化建议

高模糊半径或大面积应用可能影响渲染性能。对于固定模糊效果，建议预渲染模糊图像替代实时计算。移动端使用需测试实际性能表现。