如何实现图片中的CSS模糊背景效果？疑似多滤镜组合

云原生阿岚

2026-7-9

实现复合滤镜的背景模糊效果

单纯用blur()滤镜确实只能做出基础模糊，要达到你图里那种更有层次感的效果，得把多种CSS滤镜组合起来用，比如模糊+亮度+对比度的搭配，下面给你两种常见场景的实现方案：

一、静态背景图的复合模糊处理

如果是给整张背景图加效果，建议用伪元素承载滤镜，避免影响页面里的其他内容：

/* 容器样式 */
.blurred-background {
  width: 100%;
  height: 500px;
  position: relative;
  /* 这里替换成你的背景图 */
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
}

/* 用伪元素实现滤镜效果 */
.blurred-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  /* 核心复合滤镜，参数可根据你的图微调 */
  filter: blur(8px) brightness(0.8) contrast(1.2);
  z-index: -1;
}

参数说明：

blur(8px)：基础模糊效果，数值越大模糊越强烈，建议在5-15px之间调整
brightness(0.8)：降低整体亮度，让模糊后的背景不会太刺眼，更沉稳
contrast(1.2)：提升对比度，避免模糊后画面发灰，增强层次感

二、毛玻璃（Backdrop Filter）效果

如果是做弹窗、卡片这类半透明元素的背景模糊（类似iOS的毛玻璃），用backdrop-filter更合适：

.glass-card {
  width: 300px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.15);
  /* 对元素后方的内容应用复合滤镜 */
  backdrop-filter: blur(10px) brightness(0.9) contrast(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

这种方式是直接模糊元素背后的内容，配合半透明背景色，能做出更通透的质感。