不透明度降低时显示在导航菜单上方的图像

Question

>我有一个问题，图像出现在我的导航菜单上。我有一个固定的导航菜单，位于窗口顶部，并且有 8 张图像在页面上设置为低 0.7 不透明度。当您悬停时，图像将变为 1.0 不透明度，如果您向下滚动导航菜单上方的图像，除非我将鼠标悬停在它们上面，否则它们会像它们应该的那样出现在导航下方。我将向您展示我的导航代码，以及 8 张图像之一，也许有人可以提供帮助。这是我第一次发帖，希望一切都正确发布。

导航：

<div id="nav-container">
    <div id="nav">
        <ul>
            <li><a href="#bg1" class="smoothScroll">Home</a></li>
            <li><a href="#bg2" class="smoothScroll">Folio</a></li>
            <li><a href="#bg3" class="smoothScroll">About</a></li>
            <li><a href="#bg4" class="smoothScroll">Contact</a></li>
        </ul>
    </div>
</div>

图像：

<div id="bg2">
<div class="content-title">
    <h2>Folio</h2>
    <p> This is what I do </p>
    <div class="content-area">
        <div class="folio-item">
        <img src="images/folio/folio1.png" alt="some_text">
        </div>
        </div> <!-- content-area close-->
</div> <!-- content-title close-->

相对风格：

    #nav-container {
     width:100%;
     height:50px;
     box-shadow: 0px 1px 50px #464646;
     position:fixed;
     top:0px;
     background-image: url(images/bggrey.png);
     }
#nav {
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    }
#nav li{
    text-decoration: none;
    text-align: center;
    display: inline;
    padding: 10px;
    margin-left: 40px;
    margin-right: 40px;
    }
#nav a{
    text-decoration: none;
    color: rgb(250,250,250);
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }
#nav a:visited{
    text-decoration: none;
    color: rgb(250,250,250);
    }
#nav a:hover{
    text-decoration: none;
    color: rgb(250,250,250);
    opacity: 0.7;
    }
#nav a:active{
    text-decoration: none;
    color: rgb(250,250,250);
    }
#bg1 {
    background-image: url(images/bubble.png);
    background-repeat:no-repeat;
    background-position: center; 
    height: 800px;
    margin: -1; 
    }
    .content-title {
    width: 960px;
    margin: auto;
    font-size: 20px;
    color: white;
    text-align: center;
    padding-top: 70px;
    }
    .content-title p{
    font-size: 14px;
    }   
    .content-area {
    border: 1px dashed black;
    height: 500px;
    width: 960px;
    margin: auto;
    margin-top: 50px;
    font-size: 0px;
    }
    .folio-item {
    float: left;
    opacity: 0.7;
    }
    .folio-item:hover {
    opacity: 1.0;
    transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    }

Answer 1

如果我以正确的方式理解您希望您的#nav-container始终重叠图像; 然后你需要属性 z-index 来管理元素的级别，请尝试在 CSS 上添加以下内容：

#nav-container {
  z-index:1;
}