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

经过研究，我真的找不到答案，所以我在这里问。对于我的网站的移动版，我希望有一个按钮打开导航菜单（在桌面版上是静态的），并覆盖主要部分。我想让主部分的文字始终可见，但当导航菜单打开时，它就会褪色。我发现CSS的不透明功能，这听起来很有前途的Javascript对所有内容都有效，但Nav div在覆盖主要部分时并没有屏蔽褪色的文本。有人能帮忙吗？这是我的密码：

函数openNav（）{ document.getElementById（“nav”）.style.left=“5px”； document.getElementById（“列表”）.style.opacity=“0.5”； document.getElementById（“navc”）.style.display=“inline”； } 函数closeNav（）{ document.getElementById（“nav”）.style.left=“-206px”； document.getElementById（“列表”）.style.opacity=“1”； document.getElementById（“navc”）.style.display=“无”； }

正文{
背景色：#000000；
颜色：#ffffff；
页边距底部：0；
右边距：5px；
左边距：5px；
边缘顶部：5px；
}
#导航{
背景色：rgba（0,0,0,1.0）；
宽度：188px；
左边距：自动；
右边距：自动；
文本对齐：左对齐；
线高：16px；
边框：1px纯白；
边界底部：0；
边界顶部：0；
填充：8px；
身高：785px；
位置：绝对位置；
左：-206px；
溢出：自动；
}
#导航{
高度：30px；
宽度：30px；
显示：内联；
位置：绝对位置；
顶部：6px；
右：6px；
}
#导航{
显示：无；
高度：30px；
宽度：30px；
位置：绝对位置；
顶部：6px；
右：6px；
}
#名单{
左边距：205px；
宽度：310px；
线高：18px；
文本对齐：左对齐；
填充：8px；
位置：绝对位置；
左：-208px；
}
#横幅{
宽度：308px；
高度：30px；
边框：1px纯白；
位置：相对位置；
边际上限：0；
显示：块；
}

关于我们
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。

在我看来，您需要的是

z-index

<代码>不透明度仅影响当前元素的可见性

在

.nav

类中设置

z-index:100

。那应该能解决你的问题