Javascript 使用interactive-background.js
我试图在我的网站的登录页上获得视差效果。我使用了这个插件，从一开始就反向工作，最后我终于能够得到我想要的效果图片 这是我的代码：Javascript 使用interactive-background.js,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在我的网站的登录页上获得视差效果。我使用了这个插件，从一开始就反向工作，最后我终于能够得到我想要的效果图片 这是我的代码： HTML- Js- 我对教程文件进行了反向工程以查找此代码 现在的问题是，我在中输入的任何内容都会弄乱图片。我想放在div后面的任何div都不会出现在屏幕上，而是在背景图像后面 如何将文本和其他div放在div上，并在该div结束后添加更多内容 我尝试了z-index和定位（通过查看教程中的代码）。它似乎不起作用 而且，CSS只有在我将其放入HTML的内的样式标记中时
HTML- Js- 我对教程文件进行了反向工程以查找此代码 现在的问题是，我在
z-index样式标记中时才起作用。如果我把CSS放在一个单独的文件中，它就不起作用了。
（我确实正确地将CSS链接到HTML）
请参考我上面链接的教程，它会让你有一个想法
更新：
我对HTML做了一些更改，现在在图像上有了文本。文本不再移动，而是在顶部添加了一个空白。我尝试了边距，但它没有删除空白。我仍然无法在图像下方添加任何内容。
HTML-
你看到演示了吗
- 包装器div将占用所有可用空间，宽度为100%，高度为100%
- 包装器div保存所有内容，绝对位置
- ibg bg div只是保存背景图像，其内部不打算有内容，位置绝对便于将内容放在其上；不需要z索引
- 包装器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>
[/edit]经过一段时间的思考，结果是一个JS错误。在复制用于插件执行的脚本时，我在javascript中犯了一个错误
向@Triby大声呼喊，感谢他们帮我解决CSS问题，尽管这是另一回事，我将在另一个问题中陈述
这是正在工作的JS-
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
谢谢，这似乎起作用了。好的，我背景上的div（包装器内部和ibg bg之后的div）也随着背景移动。我该如何解决这个问题？请更新你的html和css代码，否则我想不出如何解决它。我似乎无法让它工作。。。我对css不是很在行。我使用了你的HTML代码，背景上的文本也随之移动。应该在它下面的文本在图像下面的顶部。我不知道该做什么，请编辑你的答案，包括你当前的HTML和CSS代码。完成。。请看一下标记。我也尝试了你的建议，但结果是一样的
$(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()
})
})
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
#main{
position: relative;
}
<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>
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})