Question

我正在尝试使用stellar.js插件在一个网页网站上实现视差效果。我想要的是每张幻灯片都有100％的高度。当我加载页面时一切正常，但如果我调整浏览器，幻灯片后出现奇怪的白色区域与图像背景幻灯片。

这是我的标记。只有page3应该有视差效果。

<body>
<div id="header">Testing</div>
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page" data-stellar-background-ratio="0.5"></div>
<div id="page4" class="page"></div>
</body>

这是css规则：

html,body{
height: 100%;
margin: 0;
padding: 0;
}

.page{
height: 100%;
width: 100%;
}

#page1{background-color: red;}
#page2{background-color: greenyellow;}
#page3 {
background-image:url(images/firstBG.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}
#page4{background-color: yellow;}

#header {position: fixed; background-color: gainsboro; height: 30px; width: 100%;}

以下是我的示例on jsfiddle

问题的原因是什么？

UPD：

删除background-repeat后的示例：no-repeat jsfiddle link

Answer 1

我知道这是一篇旧文章，但我想我会发布我的解决方案，因为它可以帮助其他人......我能够通过将horizontalScrolling属性设置为false，将response属性设置为true以及设置verticalOffset属性为0：

$。恒星（{ horizontalScrolling：false，响应：真的， verticalOffset：0 }）;

Answer 2

我解决了这个问题。如果将“responsive”属性设置为true，则在调整大小后将没有空格：

$.stellar({responsive:true})

以下是指向新jsfiddle

的链接

调整大小后出现stellar.js的视差效果 - 空白

2 个答案: