用实心 div 覆盖文本（使用 CSS 不透明度）

Question

经过研究，我真的找不到答案，所以我在这里问。对于我的网站的移动版本，我想要一个按钮打开导航菜单（在桌面版本上是静态的）并覆盖主要部分。我想让主要部分的文本一直可见，但是当导航菜单打开时，它会变淡。我发现了 CSS 的 opacity 功能，这听起来很有希望 Javascript 适用于所有这些功能，但 Nav div 并没有在覆盖主要部分时屏蔽掉褪色的文本。任何人都可以帮忙吗？这是我的代码：

function openNav() {
document.getElementById("nav").style.left = "5px";
document.getElementById("list").style.opacity = "0.5";
document.getElementById("navc").style.display = "inline";
}
function closeNav() {
document.getElementById("nav").style.left = "-206px";
document.getElementById("list").style.opacity = "1";
document.getElementById("navc").style.display = "none";
}

body {
background-color: #000000;
color: #ffffff;
margin-bottom: 0;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
}
#nav {
background-color: rgba(0, 0, 0, 1.0);
width: 188px;
margin-left: auto;
margin-right: auto;   
text-align: left;
line-height: 16px;
border: 1px solid white;
border-bottom: 0;
border-top: 0;
padding: 8px;
height: 785px;
position: absolute;
left: -206px;
overflow: auto;
}
#navm {
height: 30px;
width: 30px;
display: inline;
position: absolute;
top: 6px;
right: 6px;
}
#navc {
display: none;
height: 30px;
width: 30px;
position: absolute;
top: 6px;
right: 6px;
}
#list {
margin-left: 205px;
width: 310px;
line-height: 18px;
text-align: left;
padding: 8px;
position: absolute;
left: -208px;
}
#banner {
width: 308px;
height: 30px;
border: 1px solid white;
position: relative;
margin-top: 0;
display: block;
}

<div id="container">
<img src="/img/banner.png" alt="Banner" id="banner">
<img src="/img/navm.png" alt="" id="navm" onclick="openNav()">
<img src="/img/navc.png" alt="" id="navc" onclick="closeNav()">
<div id="nav">
<a href="/link1.html">Link 1</a><br>
<a href="/link2.html">Link 2</a><br>
<a href="/link3.html">Link 3</a><br><br>
<a href="/link4.html">Link 4</a><br><br>
</div>
<div id="list">
<h3 class="list" style="margin-top: 0">About Us</h3>
<div class="bio" style="margin-bottom: 14px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. <a href="/link5.html">Link 5 &gt;&gt;</a>
</div>
  </div>

Answer 1

在我看来，你需要的是z-index。 opacity 只影响当前元素的可见性。

在.nav 类中设置z-index: 100。这应该可以解决您的问题。

For further information..