javascript - 固定 div 位置

Question

我正在制作一个非常简单的应用程序，需要实现视差效果。

到目前为止我尝试过的事情，

-> 将图像放置在带有 class 的 div 中parallax。

-> 然后放置一个带有引导类的覆盖 div，其中card item-card card-block包含标题、图像和一些文本。

.parallax {
    width: 100%;
    height: 250px;
    border-radius: 0;
}

.item-card {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: center flex-start;
  align-items: center;
  margin: -24px 0 0;
  width: 100%;
  padding: 0;
  border-radius: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
  <div class="parallax">
      <img style="width: 100%" src="https://www.w3schools.com/howto/img_parallax.jpg" />
  </div>
  <div class="card item-card card-block">
       <h1 class="card-title text-center">Some big text here as headline</h1>
      <div class="card-body">
        <img  style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
  </div>
        <h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
        <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p> 
  </div>
 </div>

尝试申请position:fixeddivparallax但这无济于事。

图像 div 需要固定位置，然后下一个 div 卡需要在其上滚动。

将给定图像更改为背景图像会使整个 div不响应。

标签： javascripthtmlcsssassparallax

Answer 1

像这样试试

.parallax {
    background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
    width: 100%;
    height: 250px;
    border-radius: 0;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.item-card {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: center flex-start;
  align-items: center;
  margin: -24px 0 0;
  width: 100%;
  padding: 0;
  border-radius: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
  <div class="parallax">
  </div>
  <div class="card item-card card-block">
       <h1 class="card-title text-center">Some big text here as headline</h1>
      <div class="card-body">
        <img  style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
  </div>
        <h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
        <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p> 
  </div>
 </div>