title: Transparent background CSS
body: <p>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 <a href="http://jsfiddle.net/qaUbv/" rel="nofollow">JSFiddle</a>.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  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;
  }
  &lt;/style&gt;
  
  &lt;div id="nav"&gt;
  &lt;ol class=gbtc&gt;
  &lt;li class=gbt&gt;&lt;a href=""&gt;&lt;span class=gbts&gt;Link&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=gbt&gt;&lt;a href=""&gt;&lt;span class=gbts&gt;Link&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=gbt&gt;&lt;a href=""&gt;&lt;span class=gbts&gt;Link&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=gbt&gt;&lt;a href=""&gt;&lt;span class=gbts&gt;Link&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=gbt&gt;&lt;a href=""&gt;&lt;span class=gbts&gt;Link&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance,
  Callum</p>