Yad*_*rus 5 html javascript css jquery
我试图在我的网站的登陆页面上获得视差效果.我使用了interactive_bg.js插件,并从演示教程向后工作,我终于能够获得我想要的效果所需的图片.
这是我的代码:
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仅在我将其放入HTML style内部的标记时才起作用<head>.如果我把CSS放在一个单独的文件中它不起作用.(我确实将CSS链接到了HTML)
PS参考我上面链接的教程,它会给你一个想法.
更新:
我对HTML进行了一些更改,现在我在图像上有文字.并且文本不再移动,但在顶部添加了空白区域.我尝试了边缘,但它没有删除空白区域.我仍然无法在图像下方添加任何内容.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;
}
想了一会儿，发现是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()
})
})