如何让backdrop-filter: blur()仅模糊body背景，不穿透页面内容？

要让粘性头部的模糊效果仅作用于body渐变背景，而不影响页面内容，核心是将背景与页面内容分层，避免backdrop-filter模糊到内容元素。可以通过以下步骤实现：

1. 拆分背景与内容结构 #

在HTML中添加独立的背景容器，把渐变背景从body转移到这个容器中：

<div class="page-bg"></div>
<header>
  <!-- 头部内容 -->
</header>
<main>
  <!-- 页面主体内容 -->
</main>

2. 配置CSS样式 #

• 固定背景容器，使其占满视口并处于最底层：

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #ff0000, #022EA8, #ffa500);
  z-index: -2;
}

• 修改头部样式，移除backdrop-filter，改用伪元素模拟模糊背景效果：

header {
  position: fixed;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(20% - 40px);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  border-radius: 50px;
  background: transparent; /* 设为透明，让伪元素的模糊背景显示 */
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  /* 使用与页面背景完全一致的渐变 */
  background: linear-gradient(to bottom right, #ff0000, #022EA8, #ffa500);
  filter: blur(200px);
  z-index: -1;
  clip-path: inset(0 round 50px); /* 确保模糊效果不超出头部圆角 */
}

• 给页面内容添加顶部边距避免被头部遮挡，并设置层级确保内容在模糊层上方：

main {
  margin-top: calc(20% + 20px);
  position: relative;
  z-index: 1;
}

原理说明 #

原生backdrop-filter会模糊头部后方所有层级更低的元素（包括页面内容），而通过独立背景容器+头部伪元素的方式，相当于给头部单独生成了一个模糊后的背景副本，页面内容处于头部和伪元素之间，不会被模糊效果影响，最终视觉上就呈现出仅模糊页面背景的效果。

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