有沒有可能使用before元素在導航上覆蓋背景，就像這樣？

.nav {
  background: white;
  position: fixed;
}

.nav::before {
  content: '';
  background: black;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<nav class="nav">
  Nav content
</nav>

這可以通過隔離、隔離以及偽元素上的適當定位和z索引輕松實現；

.nav {
  /* to have the text stand out clearly */
  color: #fff;
  /* an easily-seen background for contrast
     in the demo: */
  background: #f00;
  /* just to better illustrate: */
  padding: 1rem;
  /* in order that the descendant pseudo-element
     is positioned in relation to this one:*/
  position: relative;
  /* to contain the stacking within the element,
     so that z-index: -1 on the pseudo-element
     doesn't place that pseudo-element behind
     its parent: */
  isolation: isolate;
}

.nav::before {
  content: '';
  /* for easy contrast for demonstration: */
  background-image: linear-gradient(90deg, transparent, black);
  /* in order to move the element out of
     the document flow, and to be positioned: */
  position: absolute;
  /* using 'inset' in place of 'top','right', 'bottom'
     and 'left': */
  inset: 0;
  z-index: -1;
}

<nav class="nav">
  Nav content
</nav>

嘗試使用z-index，希望對你有所幫助:)

.nav {
      background: white;
          z-index:1;
}

.nav::before {
    content:"";
    background: black;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index:-1;
}

<nav class="nav">
    Nav content
</nav>