html - 不需要的透明导航栏

Question

我想要一个不透明的导航栏。当我将 position: fixed; 添加到我的导航栏时，我看到当我滚动时导航栏是透明的。如何避免这种情况？

GitHub repo :https://github.com/CalogerN/Conquer

实时预览:https://calogern.github.io/Conquer/ ( build 中)

我试过 opacity: 1 但它什么也没做。

.navbar {
  list-style: none;
  margin-top: 0;
  height: 78px;
  font-size: 20px;
  background-color: #383e4c;
  text-align: center;
  margin-bottom: 0px;
  font-family: "Open Sans";
  font-weight: 700;
  position: fixed;
  opacity: 1;
  width: 100%;
}

<nav>
  <ul class="navbar">
    <li><button type="button" name="button" class="nav- 
    btn">Homepage</button></li>
    <li><button type="button" name="button" class="nav-btn">About Us</button>
    </li>
    <li><button type="button" name="button" class="nav-btn">Services</button>
    </li>
    <li><button type="button" name="button" class="nav-btn">Contact</button>
    </li>
    <li><button type="button" name="button" class="nav-btn">External</button>
    </li>
  </ul>
</nav>

Answer 1

只需将 z-index:99 添加到您的导航栏即可!

.navbar {
list-style: none;
margin-top: 0;
height: 78px;
font-size: 20px;
background-color: #383e4c;
text-align: center;
margin-bottom: 0px;
font-family: "Open Sans";
font-weight: 700;
position: fixed;
/* opacity: 1; */
z-index: 99;
width: 100%;