如何为body选择器设置的背景添加模糊效果？

你的代码目前只模糊了#blur容器内除弹窗之外的内容，但没有处理body的背景——因为filter属性只会作用于元素本身及其子元素，而body的背景属于body元素，不在#blur容器的范围内。

下面是两种可行的解决方案：

方案1：使用伪元素作为背景层（现代浏览器推荐） #

无需修改现有HTML结构，通过body::before伪元素承载背景，然后利用:has选择器在#blur.active时模糊背景：

body {
  margin: 0;
  position: relative; /* 确保伪元素相对于body定位 */
}

/* 用伪元素承载背景 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: /* 你的CSS图案背景 */;
  z-index: -1; /* 把背景放在内容下方 */
}

/* 保留原有的内容模糊逻辑 */
#blur.active > :not(#completion_popup) {
  filter: blur(20px);
  pointer-events: none;
  user-select: none;
}

/* 当#blur处于active状态时，模糊背景伪元素 */
body:has(#blur.active)::before {
  filter: blur(20px);
}

注意 #

:has选择器在Chrome 105+、Firefox 121+、Safari 15.4+等现代浏览器中支持，如果需要兼容更老的浏览器，建议使用方案2。

方案2：添加独立的背景层div（兼容所有浏览器） #

在HTML中新增一个专门的背景层元素，通过兄弟选择器控制其模糊状态：

修改后的HTML #

<body>
  <!-- 新增背景层 -->
  <div id="background-layer"></div>
  
  <container id="blur">
    <!-- 页面布局内容 -->
    
    <div id="completion_popup">
      <!-- 弹窗内容 -->
    </div>
  </container>
</body>

对应的CSS #

body {
  margin: 0;
  position: relative;
}

#background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: /* 你的CSS图案背景 */;
  z-index: -1;
}

/* 保留原有的内容模糊逻辑 */
#blur.active > :not(#completion_popup) {
  filter: blur(20px);
  pointer-events: none;
  user-select: none;
}

/* 当#blur激活时，模糊背景层 */
#blur.active ~ #background-layer {
  filter: blur(20px);
}

为什么之前给body加id="blur"无效？ #

当你把id="blur"加到body上时，你的选择器#blur.active > :not(#completion_popup)会选中body的直接子元素（也就是你的container），这会导致整个容器（包括弹窗）都被模糊，而不是排除弹窗。同时，body自身的背景依然不会被filter影响，因为filter是作用于子元素，而非元素本身的背景。

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