CODEWITHSUNDEEP
csshtmlopacity
user2837485
user2837485

Reputation: 59

Parent Opacity affects the child image opacity

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

Upvotes: 0

Views: 175

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25974

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

Upvotes: 2

Related Questions