纯HTML/CSS中让Header不受Popover背景影响的::backdrop替代方案

在仅使用HTML/CSS（无JavaScript）、拥有传统<body>结构（包含<header>、<main>、<footer>）的网站中：

• <header>内有若干基于Popover API实现导航或语言切换的<button>
• 触发生成的<popover>显示在顶层，位于<main>/<footer>上方、<header>下方（视口平面位置，非层叠上下文）

使用CSS的::backdrop可以为<popover>周边区域设置样式，但该效果会覆盖整个视口（即顶层下方的所有<body>元素）。现在需要实现：触发Popover的<button>所在的<header>保持可见且不受背景效果影响，仅让<main>和<footer>应用该背景效果。

当前代码（背景效果覆盖整个视口，不符合需求）：

[popover]::backdrop {
  background: var(--backdrop);
}

:root {
  --backdrop: rgba(255, 255, 255, 0.8);
}

<header>
  <nav>
    <button popovertarget="target">My button</button>
    <ul id="target" popover>
      <!-- 点击按钮后显示的导航内容 -->
    </ul>
  </nav>
</header>
<main>
  <!-- Popover显示时需要被部分覆盖的内容 -->
</main>
<footer>
  <!-- 页脚内容 -->
</footer>

请问：backdrop-filter是否可作为备选方案？具体如何实现？还有哪些其他可行方案？

一、用backdrop-filter完全可行，具体实现如下 #

backdrop-filter能搞定这个需求，核心思路是放弃默认的::backdrop，转而在Popover打开时，给<main>和<footer>单独加一层背景效果，同时保证<header>不受影响。

具体步骤： #

1. 先删掉原来的[popover]::backdrop样式，它会全覆盖，留着没用。
2. 用CSS的:has()选择器检测<header>里的Popover是不是处于打开状态（[popover]:open）。
3. 给<main>和<footer>添加伪元素，用来放背景色和模糊效果。

示例代码：

:root {
  --backdrop: rgba(255, 255, 255, 0.8);
  --blur-effect: blur(4px);
}

/* 当header里的popover打开时，给main和footer加相对定位，方便伪元素定位 */
header:has([popover]:open) ~ main,
header:has([popover]:open) ~ footer {
  position: relative;
}

/* 用伪元素实现局部背景效果 */
header:has([popover]:open) ~ main::before,
header:has([popover]:open) ~ footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--backdrop);
  backdrop-filter: var(--blur-effect); /* 想加模糊就开这个，不想加可以删掉 */
  z-index: 1;
}

/* 确保popover在伪元素上面，不然会被挡住 */
[popover] {
  z-index: 2;
}

注意：:has()现在主流浏览器都支持（Chrome、Edge、Safari 15.4以上），要是得兼容旧浏览器，就得换别的法子。

二、其他靠谱方案 #

1. CSS变量+状态控制 #

用CSS变量标记Popover的打开状态，再给<main>和<footer>设置条件样式：

:root {
  --backdrop: rgba(255, 255, 255, 0.8);
  --popover-open: false;
}

/* Popover打开时，把变量改成true */
[popover]:open {
  --popover-open: true;
}

/* 给main和footer加相对定位 */
main, footer {
  position: relative;
}

/* 先把伪元素藏起来 */
main::before, footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}

/* Popover打开时显示伪元素 */
:root:has([popover]:open) main::before,
:root:has([popover]:open) footer::before {
  opacity: 1;
}

[popover] {
  z-index: 2;
}

2. 邻接兄弟选择器（结构固定时用） #

如果你的HTML结构就是<header>紧跟着<main>，<main>紧跟着<footer>，可以用邻接兄弟选择器，写法更直接：

/* 先把默认的backdrop关掉 */
[popover]::backdrop {
  display: none;
}

/* 当header里的popover打开时，给main和footer加相对定位 */
header:has([popover]:open) + main,
header:has([popover]:open) + main + footer {
  position: relative;
}

/* 伪元素加背景 */
header:has([popover]:open) + main::before,
header:has([popover]:open) + main + footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  z-index: 1;
}

[popover] {
  z-index: 2;
}

3. 给<header>提层级（应急用，不推荐） #

要是赶时间，也可以直接给<header>设更高的z-index，让它盖在默认的::backdrop上面：

[popover]::backdrop {
  background: var(--backdrop);
}

header {
  position: relative;
  z-index: 10; /* 比backdrop层级高就行 */
}

[popover] {
  z-index: 20; /* 确保popover在header上面 */
}

但这个方法有坑：点击<header>区域的时候，不会触发Popover关闭（因为header在backdrop上面，backdrop的点击关闭失效），所以除非是临时救急，不然不建议用。

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