如何为页面添加模糊背景图且不影响其他内容及背景图尺寸定位

你之前用单独div承载背景的思路是正确的，只需要调整几个定位属性就能实现需求，这也是目前兼容性最好、最易维护的实现方案。

核心原理 #

filter属性会作用于元素本身以及它的所有子元素，所以不能直接加在body或者承载内容的父容器上。我们把背景和页面内容拆成两个独立的层级，单独给背景层加模糊效果，再把背景层固定到页面最底部即可。

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>模糊背景示例</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
    }
    /* 背景层样式 */
    .bg-image {
      /* 固定定位铺满整个视口 */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 你原来的背景配置完全保留 */
      background-image: url("https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2014/11/bloodborne-newhunter-03.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      /* 模糊效果 */
      filter: blur(8px);
      -webkit-filter: blur(8px);
      /* 放到页面最底层，不会挡住内容 */
      z-index: -1;
      /* 可选：解决模糊边缘的半透明白边问题，放大10%把白边移出视口 */
      transform: scale(1.1);
    }
    /* 页面内容层样式，你自己的内容样式正常写在这里即可 */
    .page-content {
      padding: 2rem;
      color: #fff;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <!-- 背景层放在所有内容的最前面 -->
  <div class="bg-image"></div>
  <!-- 所有页面内容都放在这个容器里 -->
  <div class="page-content">
    <h1>页面标题</h1>
    <p>这里的所有内容都不会受到模糊效果影响</p>
    <p>你可以正常添加任何元素，布局逻辑和普通页面完全一致</p>
  </div>
</body>
</html>

关键说明 #

• 关于-webkit-filter前缀：2024年主流浏览器都已经支持标准filter属性，只有Safari 9及更早的版本需要前缀，不需要兼容旧版苹果设备可以直接删掉，保留也不会产生副作用。
• 如果你需要背景随页面滚动而不是固定，把position: fixed改成position: absolute，同时给body加position: relative即可。
• 之前用backdrop-filter的方案之所以有问题，是因为这个属性只会作用于元素覆盖的区域，空白区域没有元素就不会触发模糊，不适合做全页背景模糊的需求。

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