仅 CSS 视差效果 - 页面底部空白的问题

Question

我试图实现滚动时在图像上覆盖文本容器的效果，以便图像始终保持垂直居中。

我设法做了这样的事情：

<style>
[data-parallax="container"] {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 300px;
  perspective-origin: top;
}
[data-parallax="group"] {
  height: 80vh;
  position: relative;
  transform-style: preserve-3d;
}
[data-parallax="layer"] {
  transform-origin: top;
  height: 80vh;
}
.coverImg {
  background-image: url("https://aepicos.com/codepen/images/black-widow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
[data-parallax-speed="slow"] {
  transform: translateZ(-300px)
    scale(calc((1 + (-300 /* translateZ */ * -1) / 300 /* perspective */)));
}
.content {
  position: relative;
  transform: translateZ(0);
}
</style>
<div data-parallax="container">
  <div data-parallax="group">
    <div data-parallax="layer" data-parallax-speed="slow" class="coverImg"></div>
  </div>

  <div class="content" style="border: 1px solid black">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</div>

codepen：https://codepen.io/Marcin-Brodnicki/pen/ExBGQVq

但是我对文本容器下方剩余的空白区域有疑问。我该如何解决这个问题？我想控制图像最大高度。

Answer 1

在全页视图中尝试此操作

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.main {
    height: 100vh;
    background-image: url("https://aepicos.com/codepen/images/black-widow.png");
    object-fit: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    overflow-y: auto;
}

.main .content {
    background-color: #fff;

    margin-top: 50%;
}

<main className="main">
            <div className="content">
                <h1>Natasha Romanoff</h1>
                <p>
                    Natalia Alianovna Romanoff, more commonly known as Natasha Romanoff,
                    is a fictional character primarily portrayed by Scarlett Johansson in
                    the Marvel Cinematic Universe (MCU) media franchise—based on the
                    Marvel Comics character of the same name—sometimes known by her alias,
                    Black Widow. Romanoff is depicted as an expert spy and hand-to-hand
                    combatant, trained in the Red Room from childhood to be a KGB
                    assassin. This brought her under S.H.I.E.L.D. radar, and Clint Barton
                    was sent to kill her but instead spared her life and recruited her
                    into the organization. When Nick Fury activates the Avengers
                    Initiative, she becomes a founding member. Following the fallout
                    related to the Sokovia Accords, Romanoff became a fugitive and
                    eventually reunited with her adopted family, including sister Yelena
                    Belova. They worked together to destroy General Dreykov Black Widow
                    program. After Thanos erases half of all life, Romanoff leads the
                    Avengers for five years until she sacrifices herself to obtain the
                    Soul Stone, successfully helping the Avengers restore trillions of
                    lives across the universe. Romanoff was introduced in Iron Man 2
                    (2010) and became a central MCU character, appearing in nine films,
                    including her final live-action appearance in Black Widow (2021).[5]
                    Johanssons portrayal of Romanoff was met with positive reception.
                    Alternate versions of the character appear in the animated series What
                    If...? (2021), voiced by Lake Bell. These versions include an
                    incarnation of Romanoff, who sees her world decimated by an alternate
                    version of Ultron, eventually resulting in her being recruited into
                    the Guardians of the Multiverse by the Watcher.[6]
                </p>
            </div>
        </main>