jquery - 使视差背景图像在响应时保持 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

这是我在 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% 宽。我希望这就是您要找的。