Question

我已经做了很多尝试来找出问题所在。我正在尝试具有parralax效果，但是在编写以下代码后未应用视差效果。

我已经厌倦了Internet上的不同代码，但是一切正常。

代码如下：

.img1 {
  position: relative;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<div class="img1">

  <img id="home-section" src="https://i.imgur.com/ROBU0vK.png" class="img-fluid" alt="">

  <div class="ptext">
    <div class="dark-overlay">
      <div class="home-inner text-center">
        <h2 class="display-4 text-center">DIFFERENT PULSES</h2>
        <br>
        <p> HALUTZIM 26 TEL AVIV<br><br><a href="tel:+972-50-4410600">+972-50-4410600</a></p>
        <br>
        <br>
        <div class="arrow">
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
    </div>
  </div>

</div>


<section id="studio_mission">

  

    <div class="row">
      <div class="col-md-6">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore omnis molestias necessitatibus consectetur velit consequuntur dolorem eaque laboriosam odio, at eius nulla vitae amet est iure reiciendis voluptate ipsam temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, vel, culpa perferendis amet non delectus dignissimos provident possimus itaque ea eum alias consequuntur veniam modi quos illum! Earum temporibus, odit. Iure temporibus quisquam aut odit amet unde corporis eveniet recusandae ab alias illum veniam mollitia natus accusantium voluptas dolor cupiditate, sed! Distinctio aperiam recusandae dignissimos temporibus, fuga minima assumenda consequuntur dolore asperiores perferendis officia voluptates, neque vero corporis ut quas veniam magni, nesciunt itaque necessitatibus. Obcaecati provident soluta quasi delectus nihil adipisci harum laborum veniam sint saepe perspiciatis sit rem fugiat ut quos, iusto voluptate odio ab vero! Eius minima obcaecati fuga nisi laboriosam totam provident magni cupiditate. Consequuntur mollitia cum ipsum reiciendis ducimus fugit, dolor molestiae animi hic excepturi officia perferendis voluptate accusantium est tempore porro labore quae adipisci, cumque ab asperiores. Nostrum earum sed, minima est, recusandae quam sit quibusdam rem. Aliquid voluptatum laborum iusto quam expedita. Modi at est, aspernatur rerum quae voluptates totam quas, illo iure tempore quia eligendi accusantium natus amet asperiores rem quisquam inventore consectetur, repudiandae veniam earum eum distinctio nobis. Animi dolore nihil quas adipisci reiciendis sed veniam ullam ducimus excepturi. Voluptatem eos quidem distinctio sed maiores ullam! Facere necessitatibus consequatur, dolorum recusandae.
          
        </p>
      </div>

      <div class="col-md-6">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore omnis molestias necessitatibus consectetur velit consequuntur dolorem eaque laboriosam odio, at eius nulla vitae amet est iure reiciendis voluptate ipsam temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, vel, culpa perferendis amet non delectus dignissimos provident possimus itaque ea eum alias consequuntur veniam modi quos illum! Earum temporibus, odit. Iure temporibus quisquam aut odit amet unde corporis eveniet recusandae ab alias illum veniam mollitia natus accusantium voluptas dolor cupiditate, sed! Distinctio aperiam recusandae dignissimos temporibus, fuga minima assumenda consequuntur dolore asperiores perferendis officia voluptates, neque vero corporis ut quas veniam magni, nesciunt itaque necessitatibus. Obcaecati provident soluta quasi delectus nihil adipisci harum laborum veniam sint saepe perspiciatis sit rem fugiat ut quos, iusto voluptate odio ab vero! Eius minima obcaecati fuga nisi laboriosam totam provident magni cupiditate. Consequuntur mollitia cum ipsum reiciendis ducimus fugit, dolor molestiae animi hic excepturi officia perferendis voluptate accusantium est tempore porro labore quae adipisci, cumque ab asperiores. Nostrum earum sed, minima est, recusandae quam sit quibusdam rem. Aliquid voluptatum laborum iusto quam expedita. Modi at est, aspernatur rerum quae voluptates totam quas, illo iure tempore quia eligendi accusantium natus amet asperiores rem quisquam inventore consectetur, repudiandae veniam earum eum distinctio nobis. Animi dolore nihil quas adipisci reiciendis sed veniam ullam ducimus excepturi. Voluptatem eos quidem distinctio sed maiores ullam! Facere necessitatibus consequatur, dolorum recusandae.
        </p>
      </div>
    </div>
  </div>

</section>

问题是，视差效应没有出现在任何地方，我的代码有什么问题？请帮忙谢谢

Answer 1

我认为最好设置div的background-image而不是在div中使用img。

.img1{

 background-image: url("img/bg-header.jpg");

 position: relative;
 min-height: 100%;

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

您现在拥有它的方式毫无意义。首先，您必须将div带背景图片。在此之下，您可以拥有section。

Answer 2

查看我的代码。您需要将图像设置为div的背景并为其设置高度。剩下的事没事了。

.img1 {
  background-image: url("https://i.imgur.com/ROBU0vK.png");
  min-height: 300px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.ptext {
  height: 500px;
}

<div class="img1"></div>
<div class="ptext">
  <div class="dark-overlay">
    <div class="home-inner text-center">
      <h2 class="display-4 text-center">DIFFERENT PULSES</h2>
      <br>
      <p> HALUTZIM 26 TEL AVIV<br><br><a href="tel:+972-50-4410600">+972-50-4410600</a></p>
      <br>
      <br>
      <div class="arrow">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

为什么Parralax无法使用html CSS工作

2 个答案: