透明菜单/导航栏

Question

我无法解决css问题。

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

你可以帮我解决这个问题吗？

Answer 1

如果您不希望链接文字受到影响，则应修改 .container 选择器的规则，使其看起来像这样

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

它会保留您的背景色设计，而不会影响您的文字 不透明度，以及此处多次说，会影响元素及其子元素

使用不透明度。文字受影响

使用rgba（255,255,255,0.5），未受影响的儿童

处理因javascript和悬停情况而可以采取措施的其他规则 小提琴here Bis spater

Answer 2

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

.nav {
    background-color: transparent;
}

Answer 3

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

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

Answer 4

我使用具有所需不透明度的透明png图像（bg.png），并将其称为：

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

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

Answer 5

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

.navbar
{
   background-color: transparent;
}

Answer 6

就这么简单 背景：无；