css - 父不透明度影响子图像不透明度

Question

大家好，我有一个问题，我有一个不透明度为 0.7 的父 div，但我有一个内部有 Logo 图像的 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 中的文本具有不透明度，那么您必须使用 span 设置文本的不透明度

Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.

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

Demo

此外，您的 HTML 有多个错误，我在 jsFiddle 中修复了这些错误