css - 当不透明度降低时，图像出现在导航菜单上方

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;
}