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

Хорошо, так что вы должны мне за это, потому что я сделал своей миссией разобраться с этим.Потратил больше времени, чем мне хотелось бы признать.

Удалите translateY(-50vh) из заголовка-изображения и добавьте perspective-origin: top; в html, body.

Вот правильный код.

.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, где веб-страница считала, что контент.Поэтому сохранение содержимого на месте при переводе назад и удалении смещения исправляет его.

Answer 2

Ваш z-индекс заставляет красный цвет помещаться перед вашим изображением.Удалить z-index: 10000; из .block.