如何使用css和js / jQuery创建浮动在图像上的div效果？ [英] How to create effect of divs floating over image with css and js/jQuery?

问题描述

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

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

链接到库，jsfiddle示例或教程将非常感激。谢谢

解决方案

把div放在这样的背景下，这里有一个小提琴

---

HTML p>

 < 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; 
} 
  

How do I create the effect of divs or sections of pages floating (for lack of a better description) over images?

The effects I'm interested in are showcased here: http://www.thedailybeast.com/newsweek/2013/08/30/on-syria-go-big-or-stay-home.html http://www.kitkat.com/

Links to libraries, jsfiddle examples, or tutorials would be very appreciated. Thanks

解决方案

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;
}

这篇关于如何使用css和js / jQuery创建浮动在图像上的div效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！