玻璃态导航栏backdrop-filter适配问题：窗口缩放后模糊局部失效

问题根源 #

1. 伪元素选择器错误：使用nav::before而非.navbar::before，导致模糊层未绑定到目标导航栏元素
2. 固定宽高限制：伪元素用width:100%和固定height:100px，无法适配导航栏的padding和动态高度变化
3. 定位上下文不明确：未给.navbar设置相对定位，伪元素可能出现定位偏移

修正后的CSS代码 #

方案一（保留navbar的padding）：

.navbar {
  height: 100px;
  background: linear-gradient(
    90.39deg,
    rgba(255, 255, 255, 0.61) 1.19%,
    rgba(255, 255, 255, 0) 100.87%
  );
  padding-right: 100px;
  padding-left: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 20;
  transition: height 0.4s linear;
  /* 明确伪元素的定位基准 */
  position: relative;
}

/* 绑定伪元素到导航栏 */
.navbar::before {
  /* 自动填充父元素整个区域 */
  inset: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: inherit;
  position: absolute;
  content: "";
  z-index: -1;
  border-radius: 0px 0px 20px 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  /* 扩展宽度覆盖padding区域 */
  margin: 0 -100px;
}

方案二（改用子元素margin替代navbar的padding，更简洁）：

.navbar {
  height: 100px;
  background: linear-gradient(
    90.39deg,
    rgba(255, 255, 255, 0.61) 1.19%,
    rgba(255, 255, 255, 0) 100.87%
  );
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 20;
  transition: height 0.4s linear;
  position: relative;
}

/* 给导航栏内的子元素设置左右间距 */
.navbar > * {
  margin: 0 100px;
}

.navbar::before {
  inset: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: inherit;
  position: absolute;
  content: "";
  z-index: -1;
  border-radius: 0px 0px 20px 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

说明 #

• 用inset:0替代固定宽高，伪元素会自动跟随导航栏的高度变化（适配height的transition动画）
• 修正选择器后，模糊层完全绑定到导航栏元素，窗口调整时不会出现局部显示问题
• 方案二通过子元素margin替代navbar的padding，避免了伪元素需要扩展宽度的问题，代码更简洁

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