我试图在我网站的着陆页上获得视差效果。我用了interactive_bg.js插件并从 demo tutorial 向后工作我终于能够得到我想要的效果的照片。
这是我当前的 HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<div class="main">
<h1>I am<span id="typed"></span></h1>
<h4 id="test">I create<span id="typed2"></span></h4>
<a id="but1" class="ghost-button-semi-transparent" href="#">Check me out!</a>
</div>
</div>
</body>
这是我的 CSS-
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
.main {
position: relative;
}
现在 wrapper bg div 是有背景的。我放在那个 div 之后的任何东西要么在它下面，要么如果我使用相对定位则在它上面。如果我添加边距以将其拉低，它会在更改窗口大小时搞砸我的页面。
如何在 wrapper bg div 之后放置元素？
最佳答案
如果我理解你的问题，你想在带有类包装器 bg 的 div 之后放置一些东西。 这个 div 有position:absolute，所以如果你设置它的相对位置，这个 div 保持在页面顶部(高度 100%)，如果你添加一个新的 div，它会根据你的需要定位在包装 div 之后
关于javascript - jquery_interactive_bg.js 背景以外的元素问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45500485/