透明导航栏 CSS

Question

我目前正在一个网站上工作，在网站的顶部，我有一个导航栏，当你滚动时，它停留在屏幕顶部。下面是它的示例图像：https://i.stack.imgur.com/11bni.png

问题是，当我向下滚动时，一些(但不是全部(文本通过导航栏可见并使其难以辨认：https://i.stack.imgur.com/UPafV.png

这是以下代码：

.HTML

<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="./index.html">Home</a></li>
<li><a href="./tools.html">Tools</a></li>
</ul>
<ul class="pull-right">
<li><a href="./about.html">About Us</a></li>
<li><a href="./contact.html">Contact Us</a></li>
</ul>
</div>
</div>

.CSS

.nav {
position: fixed;
background-color: #efefef;
border-bottom: 1px solid #dbdbdb;
width: 100%;
top: 0;
opacity: 1.0;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
.nav a:hover {
background: #e1e1e1;
color: black;
}
.nav li {
display: inline;
}

我已经尝试更改不透明度，但这使其在 100% 的时间内难以辨认。我愿意尝试您的任何建议。谢谢！

Answer 1

检查您在网站中使用的 z 索引，并确保为 .nav 提供最高的 z 索引，这应该可以解决问题。这样做：

.nav {
z-index: ...;  /* higher amount than used somewhere else */
}

让我知道这是否有效！

Answer 2

您的导航和页面的其余部分可能位于同一"层"上，当它们重叠时，该"层"将它们混合在一起。尝试向.nav添加z-index，以将其放置在页面其余部分的"上方"。z-index数字需要比页面上当前最高z-index高 1(如果没有其他元素具有z-index，则为 1(。

.nav {
z-index: 1;
}