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

或在div上使用内容overflow。

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

如何在背景停留时使div内容滚动

3 个答案: