javascript - parallax.js parallax-slider 视差内容和图像

Question

http://pixelcog.github.io/parallax.js/

世界，您好!我对上面的插件有问题。我已经设法制作了几个视差背景并且可以用内容填充它们没有问题但是在文档中它提到能够使用视差层类对内容使用视差效果并且当我将其添加到我的代码时整个部分变为空白.当我删除视差层 div 时，我的代码再次工作，但最终我想用视差效果影响内容，就像我对图像所做的那样。有人知道我做错了什么吗？谢谢:)

这是 html...

<div class="parallax-window" data-parallax="scroll" data-image-src="background.jpg" style="padding:20px 30px;">
    <div class="parallax-slider">
<h1 style="color:rgba(255,255,255,1);font-size:10vw;margin:0;padding:0;text-shadow:-10px 10px 15px rgba(20,0,20,1);">Wally Gunn</h1>
    </div>
</div>

还有CSS...

.parallax-window {
    min-height: 400px;
    background: transparent;
}

这个脚本我也贴在了正文底部

<script>
$('.parallax-window').parallax({
naturalWidth: 600,
naturalHeight: 400});
</script>

Answer 1

我解决了这个问题...使用:

<div class="parallax-window" data-parallax="scroll" data-image-src="https://tse1-mm.cn.bing.net/th?id=OIP.3iTMNkANw-FFI-x8vJqD4wHaDF&p=0&o=5&pid=1.1" data-z-index="-1">
    <div class="text">
        <h1>Simple Parallax Scrolling</h1>
    </div>
</div>

记得将data-z-index设置为-1，parallax-window中的元素将会显示。