背景附件中的图像:固定和位置中的段落:固定

时间:2018-03-09 16:04:03

标签: html css text position fixed

我正在创建一个单页网站,其中包含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个不同的图像,每个图像都包含不同的段落,我希望当我上升或者显示每个图像的段落时下。你知道用什么代码来做这件事吗?

0 个答案:

没有答案