如何解决前一页的视差滚动文本显示在下一页顶部
我正在尝试不仅为背景图像而且为页面上的文本创建视差滚动效果。我设法使它适用于背景图像，并尝试对各种文本使用z-index，但这也不起作用。
是否有一种方法可以做到与仅使用CSS尝试的方法类似，还是我走了完全错误的途径/需要使用JavaScript？
我编写的HTML是：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<div class="about_me_background">
<div id="hyperlink_list" class="container centered ambroise_text" style="top: 5%; width: 1250px;">
<ul>
<li><a class="ambroise_text" style="font-weight: 500;" href="index.html">HOME</a></li>
<li><a class="ambroise_text" style="font-weight: 500;" href="">CV</a></li>
<li><a class="ambroise_text" style="font-weight: 500;" href="">SYNTHETIC CHEMISTRY</a></li>
<li><a class="ambroise_text" style="font-weight: 500;" href="">SOFTWARE DEVELOPMENT</a></li>
</ul>
</div>
<h1 class="centered ambroise_text bottom_border" style="font-size: 65px; width: 812.6px;">
MY NAME
</h1>
<p class="centered ambroise_text" style="letter-spacing: 4px; font-size: 35px; font-weight: 100; top: 52%;">
Interactive resume
</p>
</div>
<div class="background_white">
<div id="profile" class="container ambroise_text" style="color: #22A39F;">
<h2>Profile</h2>
<p class="lead ambroise_text" style="color: #727878;">
Synthetic chemist with a strong interest in software engineering
</p>
<hr>
<div class="col-md-4 ambroise_text">
<h3 style="color: #22A39F;">About me</h3>
<p style="color: #000000; letter-spacing: 4px; text-justify: auto;">
Since graduating in 2018 I have worked in the materials science industry specialising in organic synthetic chemistry and polymerisations. Specifically I work in the synthesis of fluorescent polymer nanoparticles for use in cancer diagnosis and general histopathology. I also have a keen interest in software development and
</p>
</div>
<div class="col-md-4 text-center">
<img src="" alt="photo of me" width="246" height="246">
</div>
<div class="col-md-4 ambroise_text">
<h3 style="color: #22A39F;">Details</h3>
<p>
</p>
</div>
</div>
</div>
</header>
</body>
</html>
相关的CSS代码是：
.about_me_background{
background-image: url(https://imgur.com/G8Bk9xu);
background-size: cover;
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.background_white{
background: #FFFFFF;
background-size: cover;
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.centered{
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
.ambroise_text{
text-align: center;
font-family: ambroise-std,serif;
font-style: normal;
line-height: 1.2em;
text-transform: none;
letter-spacing: 6px;
font-weight: 300;
color: #fff;
}
.bottom_border{
padding-bottom: 15px;
border-bottom: 0.5px solid #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
}
也很抱歉，我尝试添加第一个背景图片的URL，但是它不起作用。如果要下载，则为imgur网址。
解决方法
不知道这是否是您要查找的内容，但尝试将z-index添加到居中的类中：
.centered{
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
/* add z-index */
z-index : -1;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
