CSS-窥视前景的背景图像

Question

我正在尝试使用视差背景，但是遇到了问题。在某些情况下，背景最终会在固定块元素的前面窥视。

它似乎取决于视口的大小以及用户向下滚动的距离。视口越高，向下滚动越远，问题就越明显。

普通： 问题：

---

代码：

https://jsfiddle.net/ow1f6gcj/

html,
body {
  height: 100%;
  margin: 0px;
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: scroll;
}

.header {
  height: 256px;
  overflow: hidden;
  background-color: #222;
}

.header-image {
  height: 256px;
  background-image: url('https://placehold.it/600x400');
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-50vh)/* Top of screen */
  translateY(128px)/* Middle of header */
  translateZ(-1px)/* Back */
  ;
}

.block {
  position: fixed;
  overflow-y: hidden;
  width: 100%;
  height: 256px;
  background-color: rgba(255, 0, 0, 0.5);
  z-index: 10000;
}

<div class="block">
</div>
<div class="header">
  <div class="header-image"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

您的z索引导致红色放置在图像的前面。 从z-index: 10000;中删除.block。

Answer 2

好吧，您欠我这个，是因为我将自己的使命深化了。花了我不愿承认的时间。

删除标题图像上的translateY(-50vh)并将perspective-origin: top;添加到html正文中。

这是正确的代码。

.header-image {
    height: 256px;
    background-image: url(https://placehold.it/600x400);
    background-position: center;
    background-repeat: no-repeat;
    transform: perspective(1px);
    transform: translateY(128px) translateZ(-1px);
}

和

html, body {
    height: 100%;
    margin: 0px;
    perspective: 1px;
    transform-style: preserve-3d;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective-origin: top;
}

在没有perspective-origin: top;的情况下，translateZ(-1px)将该内容移到了网页认为该内容所在的div之外。因此，当向后平移并删除偏移量时，将内容保留在适当的位置即可。