透明背景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);
}

Answer 2

我会这样： 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

CSS中的不透明度继承给孩子。 句号。 为了克服这个问题，请分别为导航创建一个透明的背景，并以较高的z索引绝对将li项目定位在其上。 还有其他解决方法，但是它们都需要某种形式的js，但是要使用纯CSS做到这一点，这就是您想要的。