我如何修复视差并揭示溢出？

Question

我正在创建登陆页面，其中需要视差效应来揭示动画。问题之所以发生，是因为视差包装器的Overflow-X：hidden; 可防止显示动画出现。当溢出量关闭时，动画可以很好地工作，但是视差停止工作。

    <div class="wrapper">
        <div class="parallax__group hero-container">
          <div class="parallax__layer bushes"></div>
          <div class="parallax__layer water"></div>
          <div class="parallax__layer people1"></div>
          <div class="parallax__layer people2"></div>
          <div class="parallax__layer people3"></div>
          <div class="parallax__layer hero-text">
            <div class="year-container">
              <h1>THE FUTURE IS HYBRID</h1>
            </div>
          </div>
        </div>
        <div class="container-fluid px-0">
          <div class="parallax__group info-container">
            <div class="text-container" style="text-align: center; display: inline; ">
              <h1 class="m-0" >¿Qué son los centros de coworking?</h1>
              <div class="row px-5" style="z-index: 8;">
                <div class="col-lg-4 offset-lg-1">
                  <p class="m-0">Espacios de colaboración que permiten a las personas tener flexibilidad para ser
                    productivos.</p></div>
                <div class="col-lg-2"></div>
                <div class="col-lg-4">
                  <p class="m-0"> Pueden ser un edificio, una casa o un piso que adapta sus espacios para renta por
                    horas.</p>
                </div>
              </div>
              <div class="row px-5">
                <div class="col-12">
                  <%= image_tag 'landing/home/home_principal.png', class: 'home-first-image', alt: 'home_principal' %>
                </div>
              </div>
              <div class="row px-5" style="z-index: 8;">
                <div class="col-lg-4 offset-lg-1">
                  <p>Espacios de colaboración que permiten a las personas tener flexibilidad para ser productivos.</p></div>
                <div class="col-lg-2"></div>
                <div class="col-lg-4">
                  <p> Pueden ser un edificio, una casa o un piso que adapta sus espacios para renta por horas.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="background-color: #FFFFFF;">
          <div class="container-fluid home-text pb-5">
            <div style="display: block; position: relative !important;">
              <h1 class="mt-5 px-5" data-aos="zoom-in-up" data-aos-delay="300" data-aos-duration="1000">¿Qué modalidades de
                espacio hay dentro de un centro de Coworking?</h1>
            </div>
          </div>

.wrapper {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: visible;
    perspective: 450px;
    background: #ffffff;
  }

Answer 1

尝试将您的图像放入CSS课程中，例如背景图像。

.your_class {background-image：url（your_image.jpg）;}