用坚实的div掩盖文本(带有CSS不透明度)

Question

研究后，我找不到答案，所以我在这里问。对于我的网站的移动版本，我想打开一个按钮打开导航菜单（在桌面版本上是静态的）并覆盖了主要部分。我想一直在主部分上看到文字，但是当nav菜单打开时，它将褪色。我发现CSS的不透明功能听起来很有希望的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。那应该解决您的问题。

以获取更多信息。