使用实心div

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仅影响当前元素的可见性。

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

For further information..