我正在创建一个单页网站,其中包含5个不同的图像,每个图像包含不同的文本。
以下是2张图片的示例:
.img{
background-size: cover;
background-position: center;
width: 100%;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
}
.text {
font-family: Helvetica;
color: white;
margin: auto;
padding: 30px;
width: 100%;
background-color: rgba(0,0,0,0.7);
text-align: center;
min-width: 520px;
max-width: 520px;
position: fixed;
}
.img1{
background-image: url(https://www.gaincontact.com/files/2016/10/Globelanguageshomepage-1.jpg);
}
.img2{
background-image: url(http://kubikperspectives.com/1/wp-content/uploads/2016/04/1.jpg);
}
<div class="img img1">
<div class="text">
<p>My name is…</p>
</div>
</div>
<div class="img img2">
<div class="text">
<p>I have been…</p>
</div>
</div>
一个问题是,当我转到下一张图片时,第一段仍然存在,而且由于我有5个不同的图像,每个图像都包含不同的段落,我希望当我上升或者显示每个图像的段落时下。你知道用什么代码来做这件事吗?