css - 视差背景不覆盖溢出的内容

Question

我想基于https://keithclark.co.uk/articles/pure-css-parallax-websites/创建视差效果。

使用该解决方案，背景不会覆盖溢出的内容。
我想在滚动而不是空白时看到背景图像的下部。

.parallax {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 150px;
  perspective: 1px;
}

.parallax__layer {
    position: absolute;
    color:white;
    padding-left: 20px;
    top: 0;
}

.parallax__layer--back {
    background: url('https://www.w3schools.com/w3images/nature.jpg');
    transform: translateZ(-2px) scale(3);
    background-size: cover;
    background-position: top;
    height: 100%;
    /* height: contentHeight */
}

<div class="parallax">
   <div class="parallax__layer--back"></div>
   <div class="parallax__layer">
      <h1>
         Any content <br/><br/>
         that <br/><br/>
         causes <br/><br/>
         overflow <br/><br/>
      </h1>
   </div>
 </div>

是否有完成该规则的规则？

Answer 1

您可能会注意到，这是由于使用了height:100%。另一个想法是将图层用作主要内容的伪元素，然后可以使其适合其高度：

.parallax {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 150px;
  perspective: 1px;
}

.parallax__layer {
    position: absolute;
    color:white;
    padding-left: 20px;
    top: 0;
    left:0;
    right:0;
}

.parallax__layer:before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    background: url('https://www.w3schools.com/w3images/nature.jpg');
    transform: translateZ(-2px) scale(3);
    background-size: cover;
    background-position: top;
    height: 100%;
    z-index:-1;
}

<div class="parallax">
   <div class="parallax__layer">
      <h1>
         Any content <br><br>
         that <br><br>
         causes <br><br>
         overflow <br><br>
      </h1>
   </div>
 </div>