透明菜单/导航栏

我无法解决一个CSS问题。透明菜单/导航栏

我有一个导航栏应该是透明的。但由于opacity属性以及它们是透明导航栏的子元素，所以其上的链接也会变得透明。

你能帮我解决吗？

2013-03-01 christophe

您可以在这里或通过pastebin提供代码示例，以便我们可以更好地为您提供帮助。 – Si8 2013-03-01 16:28:20

http://jsfiddle.net/kCQ7L/ – christophe 2013-03-01 16:38:29

修改您的.container类规则 – Fico 2013-03-01 17:37:13

如果你不想影响你的链接文字应修改规则来进行.container选择看起来像这样

.container { 
     width: 100%; 
     height: 90px; 
     margin: 0 auto; 
     background-color: rgba(255,255,255,0.5); 
}

它会保持你的背景颜色设计，而不会影响你的文字透明度，以及在这里说过几次，影响元素及其子元素

使用不透明度。文本受到影响

enter image description here

使用RGBA（255,255,255,0.5），孩子们没有受到影响

enter image description here

取的，可以采取适当的行动的JavaScript和悬停的情况下其他规则照顾小提琴here Bis spater

2013-03-01 17:19:39 Fico

非常感谢你！ – christophe 2013-03-02 09:04:45

这种方法的兼容性是什么？ – 2014-08-16 19:44:35

解决方案很简单。只需将background-color CSS属性设置为transparent即可。

.nav { 
    background-color: transparent; 
}

2013-03-01 16:29:08 Licson

我那样做当然。我会举一个例子 – christophe 2013-03-01 16:32:34

http://jsfiddle.net/kCQ7L/ – christophe 2013-03-01 16:38:11

在css3中，您可以使用透明背景，而不是使整个面板透明。

要添加透明颜色，您可以执行：rgba(255,255,255,.5)其中.5是不透明度。

2013-03-01 16:30:27

http://jsfiddle.net/kCQ7L/ – christophe 2013-03-01 16:37:03

我用所需的不透明度使用透明png图像（bg.png），而ca这是这样的：

.menu 
{ 
    background: url('bg.png') repeat; 
}

该png图像可以是小的，甚至1x1像素。 repeat将完全填充background空间。

2013-11-09 15:22:09 iorgu

你应该尝试一个简单的CSS背景属性。

.navbar 
{ 
    background-color: transparent; 
}

2016-08-27 11:47:27

回答