javascript - 如何使用 css 和 js/jQuery 创建 div 漂浮在图像上的效果？

Question

如何在图像上创建 div 或页面部分浮动（由于缺乏更好的描述）的效果？

我感兴趣的效果在这里展示： http: //www.thedailybeast.com/newsweek/2013/08/30/on-syria-go-big-or-stay-home.html http://www。 kitkat.com/

非常感谢链接到库、jsfiddle 示例或教程。谢谢

Answer 1

Put background on div like this, here's a Fiddle

---

HTML

<div class="wrapper">

  <div class="innerdiv">

  </div>

</div>

CSS

.wrapper {
  position: relative;
  background: url(../images/myimage.png) center no-repeat;
  z-index: 1;
}
.innerdiv {
  position: absolute;
  top: 300px;
  left: 300px;
  z-index: 100;
}

Answer 2

实际上，您可以通过在页面上进行检查来查看他们所做的事情，但是要直接回答您的问题，他们大部分时间都在使用框架，但是他们做了一些额外的事情。

他们正在使用 Twitter Bootstrap 进行布局。以下是他们所做工作的非常粗略的副本。

http://jsbin.com/EjeDiPI/1/