如何使用 css 和 js/jQuery 创建 div 漂浮在图像上的效果？ [关闭]答案

【问题标题】：How to create effect of divs floating over image with css and js/jQuery? [closed]如何使用 css 和 js/jQuery 创建 div 漂浮在图像上的效果？ [关闭]
【发布时间】：2013-09-10 13:39:31
【问题描述】：

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

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

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

【问题讨论】：

诚邀您阅读stackoverflow.com/help。
您能否更清楚地说明您的要求。还有展示的示例链接，需要实现什么？
您是指那些链接中图像上方的文本框吗？
什么效果？在图像上浮动 div，例如...背景图像？

标签： javascript jquery html css

【解决方案1】：

像这样把背景放在div上，这里是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;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：