テキストを（CSSの不透明度で）固体のdivで覆います

調査後、私は本当に答えを見つけることができなかったので、私はここでそれを求めています。私のウェブサイトのモバイル版では、ナビゲーションメニュー（デスクトップ版では静的）を開き、メイン部分を隠すボタンを持っていたいと思います。私は、メイン部分のテキストを常に見えるようにしたいと思っていましたが、Navメニューを開いたときに色褪せてしまいました。私はCSSの不透明度関数を発見しました。これは有望なJavascriptがすべてのために働いていたと言いましたが、Nav divはそれが覆われたときの主要部分の色あせたテキストをブロックしませんでした。誰も助けることができますか？私の意見では、あなたが必要なものテキストを（CSSの不透明度で）固体の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>

出典

2016-12-29 Patrick Boots CEC