연구를 마친 후 단색 div로 텍스트 (CSS 불투명도 포함)를 덮어

나는 정말 대답을 찾을 수 없어서 여기에서 묻습니다. 내 웹 사이트의 모바일 버전의 경우, 버튼을 탐색 메뉴 (데스크톱 버전에는 고정되어 있음)로 열고 주요 부분을 덮고 싶습니다. 주요 부분의 텍스트를 전체 시간 동안 볼 수있게하고 싶었지만 Nav 메뉴를 열었을 때 텍스트가 흐려질 수있었습니다. 유망한 Javascript가 모든 것을 위해 작동한다고 생각한 CSS의 불투명도 함수를 발견했지만 Nav div는 주요 부분의 바랜 텍스트를 덮어 버리지 않았습니다. 누구든지 도와 줄 수 있습니까? 내 의견연구를 마친 후 단색 div로 텍스트 (CSS 불투명도 포함)를 덮어

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