CSS 透明菜单/导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15162259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent menu/navigation bar
提问by christophe
I cannot solve a css problem.
我无法解决 css 问题。
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
我有一个应该是透明的导航栏。但是由于 opacity 属性，并且因为它们是透明导航栏的子元素，所以它上面的链接也变得透明。
can u help me to solve this?
你能帮我解决这个问题吗？
回答by Fico
If you dont want your link text to be affected you should modify the rule for the .containerselector to look like this
如果您不希望您的链接文本受到影响，您应该修改.container选择器的规则，使其看起来像这样
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text Opacity , as well said here several times , affect the element and its children
它将保持您的背景颜色设计，而不会影响您的文本不透明度，正如这里多次提到的，会影响元素及其子元素
Using opacity . Text is affected
使用不透明度。文字受到影响
Using rgba(255,255,255,0.5), children not affected
使用 rgba(255,255,255,0.5)，孩子不受影响
Take care of the other rules that can take action due your javascript and hover situations Fiddle hereBis spater
注意其他可以因您的 javascript 和悬停情况而采取行动的规则 Fiddle hereBis spater
回答by Licson
The solution is easy. Just set the background-colorCSS property to transparent.
解决方法很简单。只需将background-colorCSS 属性设置为transparent.
.nav {
background-color: transparent;
}
回答by Sam Sussman
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
在 css3 中，您可以使用透明背景而不是使整个面板透明。
To add a transparent color you can do: rgba(255,255,255,.5)where the .5 is the opacity.
要添加透明颜色，您可以执行以下操作：rgba(255,255,255,.5)其中 0.5 是不透明度。
回答by Sándor Zuboly
I use transparent png image (bg.png) with the desired opacity, and call it like this:
我使用具有所需不透明度的透明 png 图像 (bg.png)，并像这样调用它：
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeatis to fill the backgroundspace entirely.
png 图像可以很小，甚至是 1x1 像素。这repeat是background完全填满空间。
回答by Wasif Ali
You should try just a simple css background property.
您应该只尝试一个简单的 css 背景属性。
.navbar
{
background-color: transparent;
}
回答by Swilam Muhammad
its as simple as this background: none;
就像这个背景一样简单：无；
