如何仅通过透明div实现页面背景模糊且不模糊div内文本

直接给容器加blur滤镜会连带内部文字一起模糊，解决办法是把模糊效果和内容分离，用独立的层承载背景模糊：

方法1：使用额外div作为模糊背景层 #

<body style="background-image: url('bg.jpg'); margin: 0; min-height: 100vh;">
  <div style="position: relative; min-height: 100vh; padding: 2rem; box-sizing: border-box;">
    <!-- 专门承载模糊效果的背景层 -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('bg.jpg'); background-size: cover; filter: blur(8px); opacity: 0.7; z-index: -1;"></div>
    Some text
  </div>
</body>

方法2：使用伪元素（更简洁） #

<body style="background-image: url('bg.jpg'); margin: 0; min-height: 100vh;">
  <div class="content-container">
    Some text
  </div>

  <style>
    .content-container {
      position: relative;
      min-height: 100vh;
      padding: 2rem;
      box-sizing: border-box;
    }

    .content-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('bg.jpg');
      background-size: cover;
      filter: blur(8px);
      opacity: 0.7;
      z-index: -1;
    }
  </style>
</body>

核心要点 #

• 给内容容器设置position: relative，让背景层能基于它定位
• 背景层（额外div或伪元素）设置绝对定位，占满容器，z-index: -1确保它在内容下方
• 背景层使用和body一致的背景图，通过filter: blur()添加模糊，opacity控制透明度
• 文字内容位于独立层级，不受滤镜影响，保持清晰

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