响应时使视差背景图像保持100％的宽度

Question

我正在使用这种非常简单的视差方法拍摄背景图像。 http://pixelcog.github.io/parallax.js/

仅当我想对其进行调整时，它才能很好地工作，因此无论浏览器的宽度如何，图像始终为全宽（而不是剪裁边缘并在使浏览器变窄时保持全高）。 我以为我一个人就能用CSS做到这一点，但我想不通！

以下是我正在处理的页面。 我有一个绝对位于视差图像上方且宽度为100％的覆盖层。 重叠图像及其后面的图像尺寸完全相同。

http://vurtmedia.co.uk/prev/overlay/

我希望叠加层始终准确地覆盖其后面的图像。 我认为通过查看链接可以很明显地看出我要实现的目标，但我不确定这种视差技术是否有可能实现。 由于如果以相同的方式调整图像大小，则它们的大小相同，这将起作用。 我只需使用两个图像即可轻松实现此目的，并且没有像此版本中那样的视差效果

http://vurtmedia.co.uk/prev/overlay/index2.html

您可以看到覆盖图像完美地覆盖了下面的图像。 当然，如果我不打算使用视差效果，则只能使用一张图像，这是我真正想要开始的工作。

有没有办法做到这一点，或者有人对更好的方法有任何建议吗？ 甚至反之亦然也可以工作-使覆盖层填充全高而不是宽度...

Answer 1

这是我在您提供的页面上所做的修改（很难在注释中发布代码）

#vurtOverlay{
 position:relative;
 z-index:2;
}

#vurtUnderlay{
  position: fixed;
  z-index: 0;
  top: 0;
}

section{
   position: relative;
   z-index: 1;
}

现在，当我滚动时，它会产生很好的视差效果。 无论浏览器的宽度如何，背景图片始终为100％宽。 我希望这就是您想要的。