Opacity applying on all inner elements - html

Question

I'm trying to make opacity on only navigation background, but its applying on all inner divs like logo and nav, but I don't want apply opacity to logo background.
How can i make this possible?
I'm using code like this:
HTML
<div class="navigation">
<div class="logo"> logo image here </div>
<nav> navigation code here </nav>
</div>

Answer 1

Hi please use rgba background which only make background opacity
.outer {
background:rgba(0,0,0,0.5);
}

Answer 2

If your background is color (not image) then you can give color using rgba instead of hash like this: background-color: rgba(200,100,200,0.5) (last number is opacity from 0 to 1)

Answer 3

If you set the opacity of an element, it applies to all the elements it contains. You can give them an opacity as well, but it will be relative between 0 and the parent's opacity, as you can see here:
http://jsfiddle.net/hLw2c/
In other words, it's not possible to do it like this:
<div class="outer">YO<div class="inner">Zippazip</div></div>
.outer {
opacity: 0.5;
background-color: red;
}
.inner {
opacity: 1;
background-color: blue;
}
One possible workaround is to use a pseudo element to fake the background, like this:
http://jsfiddle.net/hLw2c/1/
<div class="outer">YO<div class="inner">Zippazip</div></div>
.outer {
position: relative;
}
.outer:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
background-color: red;
z-index: -1;
}
.inner {
opacity: 1;
background-color: blue;
}
Now, the header itself is fully opaque and doesn't have a background. The background is made by the :before pseudo element. This can be half transparent without affecting the other content of the header, because that content is not inside the pseudo element.

Answer 4

You should save png with opacity background (for example 80%), and change only the background of the needed div. That's all I think!
Example:
div#navigation {background: url('/src/image.png') center center repeat;}
In that case png with opacity works for element background, and all otrher things (texts, etc) are perfectly visible.
Example of image: http://jacekkowalewski.com/images/black85.png
Or add CSS rgba background style:
background:rgba(0,0,0,0.5);

Answer 5

<div class="navigation">
<div class="logo"> logo image here </div>
<nav> navigation code here </nav>
</div>
.navigation{
opacity:0.6;
}
.navigation #logo{
opacity:1.0;
}