Parent Opacity affects the child image opacity

Question

Hi all i have problem i have one parent div that has opacity of 0.7 but i have a div that has a logo image inside and parent opacity affects it please help me the code looks like this

<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>

the css code

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

possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) — Zach Saucier, Jan 11 '14 at 14:30

score 2 · Accepted Answer · edited May 23 '17 at 10:33

As seen in this SO question, you have to use rgba opacity. If you want the text in the parent div to have opacity, then you would have to set the opacity of the text with a 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

Also, your HTML has multiple errors which I fixed in my jsFiddle

Parent Opacity affects the child image opacity

1 Answers1