Question

在我的视差风格网站上，我的导航栏在覆盖背景图像时是透明的，背景图像也是固定的，但当不再超过一个时，它会变得不透明。我认为这是因为他们互相竞争？我希望导航栏在向下滚动时保持固定，我希望它在背景图像的顶部占据先例。

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="Website.css">
</head>
<body>

<ul class="navBar">
<li><a id=# section-white>Home</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<div class="img1">
    <div class="titles">
        <span class="border">
            My Programming Journey
        </span>
    </div>
</div>

<section class="section section-navy">
    <h2>Section One</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod
    </p>
</section>

<div class="img2">
    <div class="titles">
        <span class="border">
            A Bit About Myself
        </span>
    </div>
</div>

<section class="section section-navy">
    <h2>Section Two</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
      eiusmod
    </p>
</section>

<div class="img3">
    <div class="titles">
        <span class="border">
            How I Got Into Programming
        </span>
    </div>
</div>

<section class="section section-navy">
    <h2>Section Three</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
    </p>
</section>

<div class="img1">
    <div class="titles">
        <span class="border">
            My Programming Journey
        </span>
    </div>
</div>

</body>
</html>


.navBar {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #696969;
background-color: #c0c0c0;
}

.navBar li {
display: inline-block;
padding: 8px;
float: right;
text-align: 14px 16px;
}

.img1, .img2, .img3 {
position: relative;
opacity: 0.8;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Answer 1

尝试CSS中的z-index ... z-index = 1将高于z-index = 0：）

固定NavBar在固定背景图像上变得透明

1 个答案: