Сделайте фиксированную позицию div - PullRequest
Новая
       57

Сделайте фиксированную позицию div

0 голосов
/ 17 июня 2020

Я делаю очень простое приложение, в котором необходимо реализовать эффект параллакса.

Вещи, которые я пробовал на данный момент,

-> Поместил изображение в div с классом parallax.

-> Затем поместил оверлейный div с bootstrap классом 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:fixed к parallax div, но это не помогло.

Необходимо зафиксировать положение div изображения и тогда следующая карта div должна прокрутить ее.

Изменение данного изображения на фоновое изображение делает весь div как не адаптивным.

1 Ответ

0 голосов
/ 17 июня 2020

Попробуйте вот так 

.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>
...