如何实现无透明度且适配后方颜色的CSS模糊背景

方法一：使用backdrop-filter（现代浏览器首选） #

这是最简洁的实现方式，专门用来给元素背后的内容添加模糊、颜色调整等滤镜效果，元素自身的内容不会受到透明度影响。

示例代码：

<div class="card">
  <p>这里是不透明的内容</p>
</div>

.card {
  position: relative;
  padding: 2rem;
  width: 300px;
  /* 元素本身背景设为半透明纯色，增强模糊层次感 */
  background: rgba(255, 255, 255, 0.1);
  /* 核心：给背后内容添加模糊 */
  backdrop-filter: blur(10px);
  /* 可选：添加边框提升视觉效果 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

方法二：伪元素+filter: blur()（兼容老浏览器） #

如果需要兼容不支持backdrop-filter的旧浏览器，可以用伪元素单独承载模糊背景，内容层放在伪元素上方，确保内容完全不透明。

示例代码：

<div class="card">
  <p>这里是不透明的内容</p>
</div>

.card {
  position: relative;
  padding: 2rem;
  width: 300px;
  /* 确保内容层在伪元素上方 */
  z-index: 1;
}

/* 伪元素作为模糊背景层 */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 背景可以是纯色或自定义图片 */
  background: #fff;
  /* 添加模糊效果 */
  filter: blur(10px);
  /* 把模糊层放在内容下方 */
  z-index: -1;
  /* 可选：添加半透明遮罩增强融合效果 */
  background-color: rgba(255, 255, 255, 0.3);
  background-blend-mode: overlay;
}

为什么你之前的方法无效？ #

直接给元素加opacity或者background-color: rgba(255,255,255,0.5)，会让整个元素（包括内部内容）都变得透明。而上面两种方法是把模糊效果单独作用在背景层，内容层与背景层分离，自然不会出现内容透明的问题。

内容的提问来源于stack exchange，提问作者Shibali