Take the 2-minute tour ×

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>

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;}
share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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 {


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

share|improve this answer
add comment

Your Answer


