css - 如何调整菜单不透明度，而不是文本？

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 channel

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

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