不使用背景附件的视差效果:固定

Question

所以我试图创建一个像这样的视差风格的网站.然而,虽然他们使用具有"固定"附件的背景图像来使图像不移动,但我想使用jquery幻灯片插件.基本上,如果我的图像包含在滑块中,我怎样才能实现图像的"固定"附件和背景位置？目前,幻灯片中的图像只是滚动浏览...

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

谢谢!

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中的幻灯片放映之上.