logo标签列表

透明菜单/导航栏

css
7

我无法解决CSS问题。

我的导航栏应该是透明的。但由于透明属性和它们是透明导航栏的子元素，链接也会变成透明。

您能帮助我解决这个问题吗？

3
请问您能否在此处或通过pastebin提供代码示例，以便我们能够更好地帮助您。 - Si8
http://jsfiddle.net/kCQ7L/ - christophe
修改你的 .container 类规则。 - Fico
6个回答
17
如果您不希望链接文本受到影响，您应该修改.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和悬停情况而采取行动

这里是链接。

稍后再见。

这个方法的兼容性如何？ - Bhavesh G
6
解决方法很简单。只需将CSS属性background-color设置为transparent即可。
.nav {
    background-color: transparent;
}
2
在CSS3中，您可以使用透明背景代替使整个面板透明。要添加透明颜色，您可以使用rgba（255,255,255，.5），其中.5是不透明度。
1

您可以尝试使用简单的css背景属性。

.navbar
{
   background-color: transparent;
}
0

我使用带有所需透明度的透明PNG图像（bg.png），并像这样调用它：

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

png 图像可以很小，甚至只有 1x1 像素。使用 repeat 可以完全填充 background 空间。

0

就是这么简单 背景：无；

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接