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

Posted 2023-05-07

【中文标题】如何使用 css 和 js/jQuery 创建 div 漂浮在图像上的效果？ [关闭]

【英文标题】：How to create effect of divs floating over image with css and js/jQuery? [closed]

【发布时间】：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 示例或教程。谢谢

【问题讨论】：

诚邀您阅读***.com/help。

您能否更清楚地说明您的要求。还有展示的示例链接，需要实现什么？

您是指那些链接中图像上方的文本框吗？

什么效果？在图像上浮动 div，例如...背景图像？

【参考方案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/