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

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-index将li项目绝对定位在其上。还有其他的解决方法，但它们都需要某种形式的js，但要用纯css来做这就是你想要的。

透明背景CSS

3 个答案: