Question

我想更改菜单颜色的不透明度而不是文本，因此这将显示我的容器的背景图像。这是我的CSS代码

.nav {
    font-family: 'Lato', helvetica, sans-serif;
    position: absolute;
    left: 580px;
    top: 42px;
    background:#1f7f5c;
    height:60px;
    display:inline-block;
}

.nav ul {
    list-style: none;
}

.nav ul li {
    display: inline-block;
}

.nav li a {
    color: #fff;
    font-size:16px;
    display:block;
    line-height:60px;
    margin: 0 0 0 -3px;
    padding:0 26px;
    font-family:'Open Sans', helvetica, arial;
    text-shadow:0 0 1px rgba(255,255,255,0.5);
}

.nav ul li a:hover {
    background-color: #2ecc71;

}

Answer 1

对于背景颜色，请使用rgba()

指定Alpha通道

.nav {
    background-color: rgba(31, 127, 92, 0.75); /* 75% opacity */
}

.nav ul li a:hover {
    background-color: rgba(46, 206, 112, 0.75);
}

Answer 2

在背景标签上使用RGBA方法并指定不透明度。如果使用opacity属性，它将应用于所有子元素像

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);

我在http://nationalspaceolympiad.com/标题上使用了这个。用萤火虫检查一下。

Answer 3

如果将不透明度应用于父节点，那么所有子节点肯定会受到影响。我建议你不要使用不透明度或alpha，你可以创建一个相同颜色的透明图像＆amp;把它作为你的背景。

如何调整菜单不透明度，但不调整文本？

3 个答案: