我在尝试使用 w3school "tutorial" 之后的视差效果时遇到问题
我想要的是一个带有文字标题的背景图片，当向下滚动时，下一个面板将覆盖背景图片和标题。
到目前为止，我一直在尝试但没有成功，标题是固定的，但下一个面板没有涵盖:
我已尝试在所有部分中使用 z-index，但无法使其正常工作。
你知道哪里出了问题吗？
代码:
.banner-section{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4c/Banksy_lovers.jpg');
min-height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
p.wanted-name {
position: fixed;
margin-left: 35%;
top:15%;
pointer-events: none;
font-family: wanted;
color:#eeeeee;
font-size: 12vw;
}
.intro-section {
padding:100px;
background-color: white;
box-shadow: 0 -4px 8px #4d4d4d;
}
.intro-text {
padding-top: 70px;
}
.intro-text p {
margin-bottom: 100px;
text-align: justify;
}
.sub-title{
color: #868686;
font-size: 12px;
margin-bottom: 5px;
text-transform: uppercase;
}
.sp-title {
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 45px;
letter-spacing: 6px;
}
.button-wanted {
border-top: 2px solid black;
border-bottom: 2px solid black;
padding: 20px;
text-transform: uppercase;
color: black;
font-size: 14px;
}
.button-wanted:link{
color:black;
} <body><!-- Banner section start -->
<div class="banner-section">
<p class="wanted-name">Wanted</p>
</div>
<!-- End of banner section-->
<!-- First hint section -->
<div class="intro-section">
<div class="container-fluid">
<div class="row">
<div class="col-xl-4 intro-text">
<span class="sub-title">Wanted agency</span>
<h3 class="sp-title">Simply the best</h3>
<p>Integer nec bibendum lacus. Suspendisse dictum enim sit amet libero malesuada feugiat. Praesent malesuada congue magna at finibus. In hac habitasse platea dictumst. Curabitur rhoncus auctor eleifend. Fusce venenatis diam urna, eu pharetra arcu varius ac. Etiam cursus turpis lectus, id iaculis risus tempor id.</p>
<a href="about.html" class="button-wanted">Read More</a>
</div>
<div class="col-xl-7 offset-xl-1">
<img src="https://fr.wikipedia.org/wiki/Banksy#/media/File:Banksy_lovers.jpg" alt="">
</div>
</div>
</div>
</div>
</body>我以前从未使用过该代码段，如果我做错了，我深表歉意。
谢谢。
问候，
Unic0
最佳答案
您对 z-index 的使用不起作用的原因是您的 intro-section div 没有相对定位。
更改以下内容:
.intro-section {
padding:100px;
background-color: white;
box-shadow: 0 -4px 8px #4d4d4d;
position: relative;
}
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative - SOURCE
此外，对于文本，您通常不希望使用边距来居中文本，因为这会在使用不同的浏览器尺寸(响应能力)时引起问题。而是将您的 wanted-name 更改为以下内容:
p.wanted-name {
position: fixed;
top: 15%;
pointer-events: none;
font-family: wanted;
color: #eeeeee;
font-size: 12vw;
left: 0;
right: 0;
text-align: center;
}
关于html - [CSS]视差效果和固定文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53163744/