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

Question

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

它很好用，我只想调整它，所以无论浏览器的宽度是多少，图像总是全宽（而不是切断边缘并保持全高，因为你使浏览器更窄）。我以为我能用CSS做到这一点，但我无法理解！

以下是我正在处理的页面。我有一个绝对位于视差图像顶部和100％宽度的叠加层。叠加图像和其后面的图像都是完全相同的尺寸。

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

我希望叠加层始终完全覆盖它背后的图像。我认为通过查看我的链接很明显我想要实现的目标，我只是不确定这种视差技术是否可行。由于图像大小相同，如果它们以相同的方式调整大小，这将起作用。我只需要两个图像就可以轻松实现这一点，并且没有像这个版本那样的视差效果

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

您可以看到叠加图像完美覆盖下方的图像。当然，如果我没有采用视差效果，我可以使用一个图像，这只是我真正喜欢的工作。

有没有办法做到这一点，或者有没有人有任何更好的方法的建议？即使这样做也可以起作用 - 使叠加层填充全高而不是宽度......

Answer 1

这是我在the page you provided上修改过的内容（在评论中发布代码很难）

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

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

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

现在滚动时它会产生很好的视差效果。无论浏览器的宽度如何，背景图像始终为100％宽。我希望你能找到的是什么。