它将在全身添加一个黑色透明阴影，但不会添加背景滤镜。

.modal-box {
    background-color: blue;
    box-shadow: 0 0 0 5000px rgb(0 0 0 / 50%);
}

• • 更新**

这个例子显示了当背景设置为position: absolute时，将其包含在container中，希望更接近所需的结果。
尝试滚动查看模糊的container后面的元素（仅当模态可见时）。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  background-color: rgba(220, 20, 60, 0.25);
  position: sticky;
  top: 0;
  padding: 30px 10px;
  isolation: isolate;
}

.modal {
  pointer-events: none;
  visibility: hidden;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-toggle:checked ~ .modal {
  pointer-events: auto;
  visibility: visible;
}

.modal-box {
  padding: 25px;
  background-color: blue;
  color: #fff;
}

.backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  backdrop-filter: blur(5px);
}

.modal-toggle:checked ~ .backdrop {
  pointer-events: auto;
  visibility: visible;
}

.modal-toggle {
  position: relative;
  z-index: 50;
}

section {
  display: flex;
  width: 400px;
  height: 400px;
  background-color: lightgreen;
  border-radius: 20px;
  padding: 12px;
  overflow: hidden;
}

section:nth-of-type(1) {
  background: url(https://picsum.photos/200?random=1);
  background-size: cover;
}
section:nth-of-type(2) {
  background: url(https://picsum.photos/200?random=2);
  background-size: cover;
}
section:nth-of-type(3) {
  background: url(https://picsum.photos/200?random=3);
  background-size: cover;
}
section:nth-of-type(4) {
  background: url(https://picsum.photos/200?random=4);
  background-size: cover;
}
section:nth-of-type(5) {
  background: url(https://picsum.photos/200?random=5);
  background-size: cover;
}

<div id="container">
  <input id="modal" class="modal-toggle" type="checkbox" value="off" />
  <figure class="backdrop"></figure>
  <label class="modal" for="modal">
    <label class="modal-box" for="">
      modal-box
    </label>
  </label>
</div>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

• • 原件**

这似乎是因为带有backdrop-filter的父元素将使fixed元素相对于父元素而不是视口放置。
如果position属性为absolute或fixed，则包含块也可以由具有以下内容的最近祖先元素的填充框的边缘形成：...
...不是没有的背景滤波器（例如背景滤波器：模糊（10像素）;）
不确定它是否能在用例中工作，但一个可能的解决方案是为背景使用一个单独的元素，也许如下例所示。
虽然不理想，但如果需要的话，这里的单独背景仍然可以进一步设计，以包含或抵消container。
一个二个一个一个