透明背景CSS

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><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></li>
<li class=gbt><a href=""><span class=gbts>Link</span></a></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.