滾動時固定背景結束

我遇到問題。我想打一個全頁大小的背景，但我始終面臨着同樣的問題：滾動時固定背景結束

Here it is

正如你可以看到我的網頁是高於100％，當我滾動加入我的背景ends.Background在DIV id=wrapper這裏是我的代碼

HTML（JQ）的一部分：

<body> 
<div id='wrapper'> 
    <!--content--> 
</div> 
<script> 
$(document).ready(function() { 
    $('#wrapper').fadeIn(1000); 
}) 
</script>

CSS：

html,body { 
    height:100%; 
} 
body { 
    min-height: 100%; 
} 
#wrapper { 
    background: url(../bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:100%; 
    display:none; 
    background-attachment: fixed; 
}

我正在尋找答案，並閱讀了Stackoverflow中的問題（f.e。 https://stackoverflow.com/a/6654996/3726786）但沒有什麼幫助。謝謝你的幫助！

來源

2017-04-11 user3726786

嗨的用戶，首先歡迎，你有一個小提琴或鏈接的例子嗎？ – dutchsociety

您是否需要身體的html，body，＃wrapper和'min-height：100％'這些'height：100％'聲明？如果你刪除它們，它會起作用。 – vbulant

@dutchsociety https://jsfiddle.net/jv0ygnzq/這裏:)類似的東西 – user3726786

每個瀏覽器都有各自元素上的邊距和填充的默認值。所以除非你明確地設置了值，否則會有默認的間距。您可以使用下面的CSS比如做到這一點：

body { 
    margin:0; 
    padding:0; 
}

什麼更惱人的是，每一個不同的瀏覽器將對申報單的空白和邊距不同的默認值（例如火狐可能有10px的邊距和IE可能有8像素保證金）

通常的做法是重置樣式表頂部的值。

您可以通過所有這些值設置爲0手動做到這一點，或者你可以使用類似CSS reset

編輯：This網站並不需要您註冊一個通訊，以獲得CSS。

來源

2017-04-11 08:01:56 yarwest

它並不真正的工作：/我使用bootstrap所以邊際和填充我認爲是重置，因爲沒有頂部邊緣 – user3726786

我試圖搞亂你的小提琴並將身體的邊緣設置爲0似乎工作。所以問題確實存在於默認值中。 – yarwest

我認爲我已經修好了，謝謝，我所做的只是將包裝高度：100％'設置爲'最小高度：100％'，允許它動態擴展。 – user3726786

在你的代碼image將不會高於100%，這是因爲它已經採取height of 100%分配給body，現在你可以看到scroll-bar at y-axis那是因爲你還沒有更改默認margin property這是8px to 0px。

body{ 
    margin:8px; /*Default margin set that to 0px*/ 
}

見這兩jsFiddle

https://jsfiddle.net/samxrcmz/

https://jsfiddle.net/samxrcmz/1/

來源

2017-04-11 08:04:57 frnt

你的解決方案的工作原理，但在我的答案，'''margin：8px;'''中指定的是一個默認值，每個瀏覽器不同。 – yarwest

@yarwest可能是，但已經設置爲0px在其他瀏覽器上也得到相同的輸出。 – frnt

我同意，就像我，它的工作原理，它只是一個具體的細節。 – yarwest

滾動時固定背景結束

回答

相關問題