stellar.js的視差效應 - 調整大小後出現空白

我試圖在一個頁面上使用stellar.js插件實現視差效果。我想要的是每張幻燈片都有100％的高度。當我加載頁面一切正常，但如果我調整瀏覽器奇怪的白色區域出現幻燈片與圖像背景後。stellar.js的視差效應 - 調整大小後出現空白

這是我的標記。只有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：

我的去除背景後重復例如：不重複jsfiddle link

來源

2013-10-09 Tamara

嘗試刪除背景重複：不重複;對於＃page3 – Kishore

@Kishore我試圖刪除'無重複'屬性，現在調整大小後，您可以看到圖像在y座標中重複。它看起來不太好。我相信恆星配置存在一些問題，如數據恆星背景比率，數據恆星垂直偏移... – Tamara

我解決了這個問題。如果將「響應」屬性爲true，將不會有空格調整後：

$.stellar({responsive:true})

這裏是一個鏈接到新jsfiddle

來源

2013-10-11 13:24:54 Tamara

我發現響應：真正沒有解決我的問題... –

我知道這是一個老的文章，但我想我會後我的解決方案櫃面它可以幫助別人......我能夠通過設置horizontalScrolling屬性設置爲false，響應屬性爲true還有verticalOffset屬性設置爲0來解決這個問題：

$ .stellar（{ horizontalScrolling：假，迴應：是， verticalOffset：0 }）;

來源

2016-08-15 23:28:42 mark1187

stellar.js的視差效應 - 調整大小後出現空白

回答

相關問題