html - 不使用背景附件的视差效果 :fixed

Question

所以我正在尝试创建一个视差风格的网站，很像 this one.然而，虽然他们使用带有“固定”附件的背景图像来实现图像不移动的效果，但我想使用 jquery 幻灯片插件。基本上，如果图像包含在 slider 中，我如何实现图像的“固定”附件和背景位置？目前幻灯片中的图像只是滚动浏览...

我很乐意提供代码示例并在此过程中删除所需的任何进一步信息

谢谢!

Answer 1

像这样的东西应该可以工作(只是示例代码 [使用语义 id]):

<div id="SlideShowContainer">Slide Show Generates into this div</div>
<div id="AllOtherContentWrapper">All other content goes here</div>

然后将 css 设置为:

#SlideShowContainer {
   position: fixed;
   z-index: 0;
   top: 0; right: 0; bottom: 0; left: 0;
}

#AllOtherContentWrapper {
   position: relative; /* this could be absolute depending on application*/
   z-index: 1;
}

这应该使幻灯片放映的容器等于当前屏幕大小，并将其固定到位(基本上就像固定背景一样)。然后网站的其余部分将位于另一个 div 中的幻灯片放映之上。