Question

大家好我有问题我有一个不透明度为0.7的父div但是我有一个内部有徽标图像的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中继承Opacity。这是一个后期渲染组变换。换句话说，如果a具有不透明度设置，则将div及其所有子项渲染到临时缓冲区中，然后将整个缓冲区合成到具有给定不透明度设置的页面中。

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

Demo

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

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

1 个答案: