我正在尝试创建视差滚动效果，不仅用于背景图像，还用于页面上的文本。我设法让它对背景图像起作用，并尝试对各种文本使用z索引，但也不起作用。
有没有一种方法可以做到这一点，类似于我尝试使用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://i.stack.imgur.com/9HUSl.jpg);
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的网址。
https://i.stack.imgur.com/9HUSl.jpg
不知道这是否是您想要的，但尝试将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;
}