Родительская непрозрачность влияет на непрозрачность изображения ребенка

Question

Привет, у меня есть проблема. У меня есть один родительский div с непрозрачностью 0,7, но у меня есть div, у которого есть изображение логотипа внутри, а родительская непрозрачность влияет на него, пожалуйста, помогите мне, код выглядит так:

<div class="banner"> 
    <img src="banner.png" width:100%> 
    <div class="navbac"> 
     <div class="logo"></div> 
     <ul class="nav"> 
      <li>a href"#">Home</a></li> 
      <li>a href"#">Contact</a></li> 
      <li>a href"#">About us</a></li> 
     </ul> 
    </div> 
</div> 

код CSS

.navbac{backgroud:#FFF; opacity:0.7; position:relative;bottom:730px;} 
.logo{background:url(img/logo.PNG) no-repeat; width:257px; height:50px;} 

Answer 1

Как видно из this SO question, вы должны использовать rgba непрозрачность. Если вы хотите, чтобы текст в родительском div имел непрозрачность, вам нужно было бы установить непрозрачность текста с помощью диапазона

Непрозрачность на самом деле не наследуется в CSS. Это преобразование группы после рендеринга. Другими словами, если у вас есть набор непрозрачности, вы превращаете div и всех его детей во временный буфер, а затем объединяете весь этот буфер на страницу с заданным значением непрозрачности.

.navbac { 
    background:rgba(255,255,255,0.7); 
    position:relative; 
    bottom:0px; 
} 

Demo

Кроме того, ваш HTML имеет несколько ошибок, которые я установил в моей jsFiddle