html - 透明背景 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>

非常感谢任何想法，我希望您能理解我要描述的内容。我提供的代码带有背景图片，更易于查看。

提前致谢， 卡勒姆

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);
}