用纯色 div 遮盖文本（CSS 不透明度）

Question

经过研究我真的找不到答案所以我在这里问。对于我网站的移动版本，我想要一个按钮打开导航菜单（在桌面版本上是静态的）并覆盖主要部分。我想让主要部分的文字一直可见，但是当导航菜单打开时它会变淡。我发现了 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 class 中设置 z-index: 100。那应该可以解决您的问题。

For further information..

用纯色 div 遮盖文本（CSS 不透明度）

Cover up text(with CSS opacity) with a solid div

html

javascript

css

mobile

opacity