我试图在我网站的着陆页上获得视差效果。我用了interactive_bg.js插件并从 demo tutorial 向后工作我终于能够得到我想要的效果的照片。
这是我的代码:
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js-
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
我对教程文件进行了逆向工程以找到这段代码。
现在的问题是，我放入 <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> 中的任何内容搞砸了图片。我想放在 <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> 之后的任何 div div 甚至不显示在屏幕上，而是在背景图像后面。
如何将文本和其他 div 放在 <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> 上div 和该 div 结束后的更多内容？
我试过了z-index和定位(通过查看教程中的代码)。好像不行。
此外，CSS 仅在我将其放入 style 时才起作用<head> 内的标签的HTML。如果我将 CSS 放在一个单独的文件中，它就不起作用。
(我确实正确地将 CSS 链接到 HTML)
P.S 引用我上面链接的教程，它会给你一个想法。
更新:
我对 HTML 做了一些更改，现在图像上有文字。文本不再移动，但在顶部添加了一个空白。我试过 margin 但它没有删除空白。我仍然无法在图像下方添加任何内容。
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
最佳答案
你看过演示吗？ <强> http://www.thepetedesign.com/demos/interactive_bg_demo.html
- wrapper div 将占用所有可用空间，宽度为 100%，高度为 100%。
- wrapper div 包含所有内容，位置绝对。
- ibg-bg div 仅包含背景图像，其内部无内容，绝对位置便于将内容放在其上；不需要 z-index。
- wrapper div 内和 ibg-bg div 之后的任何其他 div 都将显示在顶部。
如何将文字置于背景之上？ 正如我之前所说，将该内容放在包装器 div 中和 ib-bg div 之后。
如何在该 div 之后放置文本或更多内容？ 在 wrapper div 下面添加您的新内容并开始使用 css 属性来根据您的喜好调整演示。
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[编辑] 从演示中复制的 CSS。
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/编辑]
关于javascript - 使用 interactive-background.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45474599/