Transparent background CSS - html

Question

I have a navigation bar with a semi-transparent background but the navigation links are also semi-transparent. How can I make it so my links do not become transparent? I have attached a copy of my code below (also available on JSFiddle.
<style type="text/css">
body{
margin:0;
padding:0;
}
a{
font-family:sans-serif;
font-size:15px;
}
#nav{
height:30px;
background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
}
#right{
position:absolute;
top:0;
right:0;
}
.gbt{
display:inline-block;
line-height:26px;
}
.gbtc{
margin:0;
padding:0;
}
.gbts{
padding:6px;
}
</style>
<div id="nav">
<ol class=gbtc>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
<li class=gbt><span class=gbts>Link</span></li>
</ol>
</div>
Any ideas are much appreciated and I hope you can understand what I'm trying to describe. The code I have provided is easier to see with a background image.
Thanks in advance,
Callum

Answer 1

To set the opacity of the background only, you can set an rgba value for the background colour. This will not affect any child elements.
#nav {
background:rgba(221, 221, 221, 0.6);
}
IE does not support rgba however. For this, you need to use a proprietary filter:
#nav {
background:rgba(221, 221, 221, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=# 99dddddd);
}

Answer 2

I would do it like this: http://jsfiddle.net/5p3vN/
html:
<div id="bg"></div>
<div id="nav">
<!-- the list -->
</div>
css:
#bg{
height:30px;
width: 100%;
background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
}
#nav{
position: absolute;
top:0;
}

Answer 3

The opacity in CSS is inherited to children. Full Stop. To overcome this create a the transparent background to your navigation seperately and absolutely position your li items over it with a higher z-index. There are other workarounds but they all require some form of js, but to do it with pure css this is what you want.