Question

我已经设置了一个内容包装器，将某些内容显示为背景，并将其覆盖在前台的更多（主要）内容上。我已经使用绝对定位实现了这一目标，您可以看看我在这里重新讨论的问题和情况：CodePen

让我解释一下：

我在背景中设置了旋转木马并且它完美地工作，并且在前景内容中我有一个表格，它显示在它上面。但是，此表是动态数据表，如果内容长比屏幕高度（在页面加载时，整个包装和背景轮播的高度和相应的图像设置为100vh ），然后桌子溢出图像和整个容器的高度，现在这很好，打算，但我希望修复背景并遵循前景内容的动态高度，然后停止在内容的末尾修复，然后滚动更多以正常显示页面的其余内容。

我试过：

在用户滚动到内容之下时，动态修复背景位置并删除固定属性，但这不起作用，因为背景会一直跳回来，显示表格如何溢出到其余内容上（因此它不会停留在滚动但未固定的位置）
在StackOverflow上搜索和搜索，但无济于事，因为我无法使用正确的术语进行搜索，或者我遗漏了一些内容，人们通常对此没有任何问题。

我不担心手机浏览器或屏幕尺寸的移动兼容性，因此请随意提出与移动设备无法兼容的内容。

修改1 ：在标题

.jumboContent {
  position: absolute;
  top: 30%;
  left: 15%;
  width: auto;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  color: white;
  .desc {
    width: 40vw;
    height: 100vh;
    text-align: center;
    h1,
    h2 {
      position: relative;
      top: 35%;
    }
  }
}

#parallax {
  height: 100vh;
  position: relative;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .bgContent {
    transform: translateZ(-1px);
  }
  .content {
    transform: translateZ(0);
  }
}

table {
  width: 100%;
  height: 45%;
  border: 1px solid white;
  border-radius: 15px;
  padding: 10px;
  background-color: rgba(40, 40, 40, 0.4);
  font-size: larger;
  th {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  td {
    padding: 10px;
    font-weight: lighter;
  }
  .name {}
  .flag {
    max-height: 30px;
    margin-bottom: -7px;
  }
}

<div id="parallax">
  <div class="bgContent">
    <img src="https://source.unsplash.com/1920x1080/?coffe">
  </div>
  <div class="content jumboContent">
    <table align="center">
      <tr>
        <th align="left">ID</th>
        <th align="left">Name</th>
        <th align="left">Age</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Yahoo</td>
        <td>21</td>
      </tr>
    </table>
  </div>
</div>

<br><br><br>

<p>Lorem ipsum dolor amet taiyaki yr ea in pug tbh food truck minim vinyl copper mug officia street art cupidatat excepteur DIY. Organic tattooed eiusmod, seitan jean shorts asymmetrical pour-over. Slow-carb minim adaptogen, echo park exercitation intelligentsia
  dolore wayfarers edison bulb schlitz. Umami do mixtape, disrupt cronut pop-up ethical chicharrones yr tumeric. Polaroid actually pickled, yuccie eu vegan organic kinfolk ullamco. Shoreditch portland cronut irony, synth dolor activated charcoal fugiat
  vinyl glossier small batch consequat austin bushwick hexagon. Street art jean shorts copper mug ut. Taxidermy keffiyeh proident jianbing hexagon cold-pressed four loko literally. Taxidermy affogato ut cardigan occaecat. Everyday carry ex hell of pok
  pok cred jean shorts unicorn pug yuccie labore vice gluten-free. Hella in marfa meggings pour-over. Est brooklyn VHS irure tbh. Humblebrag raw denim ethical, irony try-hard offal bicycle rights listicle fixie hot chicken occupy. Lumbersexual veniam
  put a bird on it taxidermy umami neutra ex semiotics sed la croix officia dolor fanny pack. Taxidermy brooklyn seitan enim jianbing, esse lorem actually photo booth direct trade sed swag lo-fi neutra.</p>

Answer 1

我将<img>包裹在另一个具有绝对位置

的div中

<div class="imgBackground"><img src="...">
</div>

查看此链接

https://codepen.io/anon/pen/OzgqqJ?editors=1100

HTML / CSS固定背景内容遵循具有动态高度

1 个答案: