透明背景CSS

Question

我有一个半透明背景的导航栏,但导航链接也是半透明的.我该怎么做才能让我的链接变得透明？我在下面附上了我的代码副本(也可以在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>

任何想法都非常感谢,我希望你能理解我想要描述的内容.我提供的代码更容易看到背景图像.

在此先感谢Callum

Answer 1

要仅设置背景的不透明度,可以设置rgba背景颜色的值.这不会影响任何子元素.

#nav {
  background:rgba(221, 221, 221, 0.6);
}

但IE不支持rgba.为此,您需要使用专有过滤器:

#nav {
  background:rgba(221, 221, 221, 0.6);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#  99dddddd);
}