Question

我试图在我的网站的目标网页上获得视差效果。我使用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 放在 <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div以及更多内容上？

我尝试了z-index并定位（通过查看教程中的代码）。它似乎不起作用。

此外，只有当我将它放在HTML的style内的<head>标记中时，CSS才有效。如果我把CSS放在一个单独的文件中它不起作用。（我确实将CSS正确链接到了HTML）

P.S参考我上面链接的教程，它会给你一个想法。

更新
我对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;
}

Answer 1

你看到了演示吗？的 http://www.thepetedesign.com/demos/interactive_bg_demo.html

包装div将占用所有可用空间，宽度为100％，高度为100％。

包装器div保存所有内容，位置绝对。

ibg-bg div只是保存背景图像而不是有内容，位置绝对容易把内容放在上面;不需要z-index。

包装div内的任何其他div以及ibg-bg div之后的顶部显示。

如何将文字放在后台？正如我之前所说，将该内容放在包装器div中并放在ib-bg div之后。

如何在该div之后放置文字或更多内容？在包装器div下面添加新内容并开始使用css属性来调整演示以适应您的偏好。

<body> <div class="wrapper bg" data-ibg-bg="pics/Q.jpg">  <div class="ibg-bg"></div> <div>This will appear over your background</div> </div> <div>This will appear below your background</div> </body>

[编辑] CSS从demo。
复制
#main { position:relative; float:left; width:100%; margin:0 auto; }

[/编辑]

Answer 2

经过一段时间的思考后，结果却是一个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()
  })
})

使用interactive-background.js

2 个答案: