【问题标题】:Parallax Effect without the use of background-attachment:fixed不使用背景附件的视差效果:已修复
【发布时间】:2012-02-24 10:41:12
【问题描述】:

所以我正在尝试创建一个类似于this one. 的视差风格网站,但是,尽管他们使用带有“固定”附件的背景图像来实现图像不动的效果,但我想使用 jquery 幻灯片插件。基本上,如果图像包含在滑块中,如何实现图像的“固定”附件和背景位置?目前幻灯片中的图像只是滚动...

我很高兴提供代码示例,减少沿途所需的任何进一步信息

谢谢!

【问题讨论】:

  • 嘿 romboards,请您接受 ScottS 的回答。我遇到了同样的问题,他的解决方案非常适合。

标签: html css parallax


【解决方案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 中该幻灯片的顶部。

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多