尽管背景透明度生效，但 backdrop-filter（模糊）对 .menu-panel 无效

[awesomerobot (Kris)]

好的，这要稍微复杂一些……当像 header 这样的元素应用了 backdrop-filter 时，它就会成为该效果的根元素。因此，嵌套在该根元素内部的任何后代元素（如下拉面板）只能模糊该根元素内部的内容……即使面板超出了 header 的范围，它们也无法看到 header 之外的页面内容，所以在那部分区域你看不到任何模糊效果。

作为替代方案，你可以在 header 上使用伪元素来避免这种根元素限制。

.d-header {
  position: relative;
  isolation: isolate;
  background-color: transparent;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
}

.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
  backdrop-filter: blur(12px);
}

.user-menu .quick-access-panel .read {
  background: transparent;
}