0

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

我认为问题可能是导航栏出现在徽标之前，但在我的代码中，我的徽标先出现。

#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>

徽标图像只是一个常规的 < img > 标签，其中心位置有一点样式。

4

4 回答 4

2

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

CSS opacity 设置改变整个元素的不透明度，包括子元素。尝试使用 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 透明度 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;
}
于 2012-04-12T00:23:04.257 回答
1

如果您在“#nav”中有徽标，它将是透明的。您必须为徽标提供：

.logo{position:absolute;}

并将其移到导航上。

于 2012-04-12T00:08:26.110 回答
0

我想你应该想要这个。

CSS

#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
    margin:10px 0 0 0;
    position:relative;
    padding-left:110px;
}
.logo{
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:25px;
    background:green;
}

HTML

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

                <div class="logo">Logo here </div>

your navi here
            </div>
        </div>

现场演示http://jsfiddle.net/rohitazad/yNMbt/

于 2012-04-12T04:35:01.580 回答
0

您可以尝试提高图像的 z 水平，使其在视觉顺序中“浮动”在其他元素之上。

<img src="image.png" style="z-index: 1000" />

尽管听起来您的图像正在从父元素继承样式。如果您将图像放置在#nav 元素中，那么可能就是这种情况。确保opacity: 1;在这种情况下设置图像样式。

旁注：您可能还希望将样式从元素标签中提取出来并放入您的 CSS 中以使其更清晰。

于 2012-04-12T00:14:29.247 回答