我想要一个不透明的导航栏。当我将 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>
最佳答案
只需将 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%;
关于html - 不需要的透明导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57322040/