div 투명하지만 내용 투명하지 않은 해결 방법

두 레이어를 분리하여 네스트하지 않으면 됩니다.

  
  
  
  

   
   
   
   
#div1{width:300px; height:200px;  position:relative；  } 
   
   
   
   
. nav{ background:black;filter:alpha(opacity:30);opacity:0.3; height:100%;position:absolute;width:100%;top:0; z-index:1 } 
   
   
   
   
.box { width:300px; height:20px; background:blue; position:absolute; bottom; top:0;z-index:0; } 
  
  
  
  

  
  
  
  

   
   
   
   
<div id="div1"> 
   
   
   
   
    <div class="nav"></div> 
   
   
   
   
    <div class="box">       </div> 
   
   
   
   
</div>