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

大家好，我有问题，我的一个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;}

最佳答案

如this SO question所示，您必须使用rgba不透明度。如果希望父div中的文本具有不透明度，则必须使用跨度设置文本的不透明度


  不透明度实际上不是CSS所继承的。这是一个渲染后的组转换。换句话说，如果设置了不透明度，则将div及其所有子对象渲染到一个临时缓冲区中，然后使用给定的不透明度设置将整个缓冲区合成到页面中。

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

Demo

另外，您的HTML有多个错误，这些错误已在jsFiddle中修复

关于css - 父级不透明度会影响子级图像的不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21063370/