[CSS]视差效果和固定文本

Question

我在尝试使用 w3school "tutorial"

之后的视差效果时遇到问题

我想要的是带有文字标题的背景图片，当向下滚动时，下一个面板将位于背景图片和标题上方。

到目前为止，我一直在尝试但没有成功，标题是固定的，但不包括在下一个面板中，如下所示：

screenshot

我已尝试在所有部分使用 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

Answer 1

您使用 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;
}

[CSS]视差效果和固定文本

[CSS]Parallax effect and fixed text

html

css

parallax