html - CSS/HTML 不透明度

Question

我的代码有点问题。我的页面上有一个透明/玻璃状的导航栏。我正在尝试在其上添加 Logo ，但是当我这样做时， Logo 也是透明的并且可以透过它看到。

我认为问题可能是导航栏出现在 Logo 之前，但在我的代码中，我的 Logo 排在第一位。

#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}

<div style="border-bottom-right-radius: 0.6em; 
                    border-bottom-left-radius: 0.6em;
                    box-shadow: 0px 0px 7px #000000;
                    width: 960px;">
            <div id="nav">

            </div>
        </div>

Logo 图片只是一个普通的 标签，中间有一些样式。

Answer 1

您的问题表明 Logo 位于导航容器之外，但您的症状表明它是导航栏的子项。即使不是，您的代码也有缺陷，您很快就会在 nav 元素的子元素上遇到类似的问题。

CSS 不透明度设置会更改整个元素(包括子元素)的不透明度。尝试使用 rgba 设置背景颜色:

#nav {
    background: #000;
    background: rgba(0,0,0,.15);
    height: 40px;
    border-bottom-right-radius: 0.6em;
    border-bottom-left-radius: 0.6em;
}

rgba 背景在旧浏览器(IE8 及之前)中会失效，#000 背景是它们的后备。

您还可以创建一个半透明的 png 文件并将其设置为后备背景，这将适用于 IE7 及更高版本(如果您使用 png transparency hack 则适用于 IE6):

#nav {
    background: url('semitransparent.png');
    background: rgba(0,0,0,.15);
    height: 40px;
    border-bottom-right-radius: 0.6em;
    border-bottom-left-radius: 0.6em;
}