css - 透明菜单/导航栏

Question

我无法解决 CSS 问题。

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

你能帮我解决这个问题吗？

score 16 · Accepted Answer

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

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

它将保持您的背景颜色设计而不影响您的文本不透明度，正如这里多次所说，影响元素及其子元素

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

在此处输入图像描述

使用 rgba(255,255,255,0.5)，儿童不受影响

在此处输入图像描述

注意由于您的 javascript 和悬停情况而可以采取行动的其他规则在这里提琴 Bis spater

score 6 · Accepted Answer

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

.nav {
    background-color: transparent;
}

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

.navbar
{
   background-color: transparent;
}

score 0 · Accepted Answer

我使用具有所需不透明度的透明 png 图像（bg.png），并这样称呼它：

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

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

score 0 · Accepted Answer

0

它就像这个背景一样简单：无；

于 2018-06-30T08:30:06.453 回答

6 回答 6