Question

之后，我试图利用视差效果遇到问题

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

到目前为止，我一直在尝试没有成功的标题，但是标题没有被下一个面板覆盖：

我尝试在所有部分中使用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仅适用于其position属性已显式设置为绝对，固定或相对的元素- 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]视差效果和固定文字

1 个答案: