如何讓div內容在背景保持滾動時

Question

好吧，我的意思是，我希望我的背景圖像保持不變，並且隨着更多內容被添加，div中的內容將滾動。

看我不希望這種滾動 http://codepen.io/anon/pen/gLCns/

看有點像你在哪裏在每個窗口滾動codepen內容，但它不只是在窗口流遍

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; 
} 

這裏是一個Demo.

Answer 2

背景附件屬性是，如果背景圖像滾動或住宿什麼控制。

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

所以在CodePen有background-attachment:fixed;而它上面的內容滾動圖像原地踏步。

然後，您只需將內容容器居中放置在頁面上，不會溢出，隨着內容的增長，頁面將滾動，但背景已固定。

Answer 3

好的，首先你的代碼是一團糟。我建議先通過w3 validator運行你的代碼。

你有兩個選擇，做你想要的東西，無論是使用背景fixed & cover你已經有了答案：

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; 
} 

與內容股利

或使用overflow。

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