我正在尝试使用恒星.js插件在一个页面站点上实现视差效果。我想要的是每张幻灯片都有 100% 的高度。当我加载页面时，一切正常，但是如果我调整浏览器大小，带有图像背景的幻灯片后会出现奇怪的白色区域。
这是我的标记。只有第 3 页应该有视差效果。
<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%;}
这是我在jsfiddle上的例子
问题的原因可能是什么？
上级：
删除背景重复后的示例：无重复的jsfiddle链接
我知道
这是一篇旧文章，但我想我会发布我的解决方案，以防它对其他人有帮助......我能够通过将水平滚动属性设置为 false，将响应属性设置为 true 以及将 verticalOffset 属性设置为 0 来解决此问题：
$.stellar({ 水平滚动：假， 响应式：真， 垂直偏移：0 });
我解决了这个问题。如果将"响应式"属性设置为 true，则调整大小后将没有空格：
$.stellar({responsive:true})
这是新jsfiddle的链接