CSS/HTML Opacity - html

Question

I'm having a bit of a problem with my codes. I have a transparent/glassy looking navigation bar on my page. I am trying to add a logo over it, however when I do, the logo as well is transparent and can see through it.
I think the problem may be that the navigation bar is coming before the logo, but in my codes, I have the logo coming first.
#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;">
<div id="nav">
</div>
</div>
The logo image is just a regular < img > tag with a bit styling centering it in the center.

Answer 1

Your question indicates the logo is outside the navigation container, but your symptoms indicate that it is a child of the nav bar. Even if it is not, your code is flawed, and you will soon experience similar issues on the children of the nav element.
The CSS opacity setting changes the opacity of the whole element, including children. Try setting a background color using rgba:
#nav {
background: #000;
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
The rgba background will fail in older browsers (IE8 and before), the #000 background is a fallback for them.
You could also create a semi-transparent png file and set it as the fallback background, this will work for IE7 and later (and IE6 if you use a png transparency hack):
#nav {
background: url('semitransparent.png');
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}

Answer 2

If you have the logo inside of the "#nav" it will be transparent. you will have to give the logo a:
.logo{position:absolute;}
And move it over the navigation.

Answer 3

You can try raising the z-level of the image so that it "floats" above the other elements in the visual order.
<img src="image.png" style="z-index: 1000" />
Although it sounds like your image is inheriting styles from the parent element. If you're placing the image inside the #nav element, then this is probably the case. Make sure you set opacity: 1; on the image style in that case.
Side note: You might also want to extract that styling out of the element tag and into your CSS to make it clearer.

Answer 4

i think u should want this .
CSS
#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
margin:10px 0 0 0;
position:relative;
padding-left:110px;
}
.logo{
position:absolute;
top:0;
left:0;
width:100px;
height:25px;
background:green;
}
HTML
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;margin:10px 0 0 10px;">
<div id="nav">
<div class="logo">Logo here </div>
your navi here
</div>
</div>
Live demo http://jsfiddle.net/rohitazad/yNMbt/