如何在背景停留時使div內容滾動

Question

好的，所以我的意思是，我希望保留背景圖像，並隨着添加更多內容而使div中的內容滾動。

看到我不想讓它滾動http://codepen.io/anon/pen/gLCns/

在每個窗口中滾動時都看到類似代碼筆上的內容，但是它並不僅在那個窗口中流過

Answer 1

您可以使用background-attachment: fixed; 固定背景圖片的屬性。

html { 
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%; 
height:1020px;
left:20px;
top:20px;
}

這是一個演示。

Answer 2

background-attachment屬性是控制背景圖像滾動或停留的屬性。

http://www.w3schools.com/cssref/pr_background-attachment.asp

因此，在CodePen中，它具有background-attachment:fixed; 並且當其上方的內容滾動時，圖像保持原狀。

然后，您只需將內容容器放在頁面上居中，避免溢出，並且隨着內容的增長，頁面將滾動，但是背景是固定的。

Answer 3

好的，首先您的代碼是一團糟。 我建議您首先通過w3驗證器運行代碼。

您有兩種選擇來做您想做的事情，一種是使用背景固定的 封面 ，而背景已經覆蓋了您的答案：

html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

或在內容上使用div上的溢出 。

#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}