[英]how do I make the div content to scroll while the background stays
Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added. 好的,所以我的意思是,我希望保留背景图像,并随着添加更多内容而使div中的内容滚动。
see I don't want this to scroll http://codepen.io/anon/pen/gLCns/ 看到我不想让它滚动http://codepen.io/anon/pen/gLCns/
see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window 在每个窗口中滚动时都看到类似代码笔上的内容,但是它并不仅在那个窗口中流过
you can use background-attachment: fixed;
您可以使用
background-attachment: fixed;
property to fix the background image. 固定背景图片的属性。
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;
}
The background-attachment property is what controls if the background image scrolls or stays. background-attachment属性是控制背景图像滚动或停留的属性。
http://www.w3schools.com/cssref/pr_background-attachment.asp
http://www.w3schools.com/cssref/pr_background-attachment.asp
So in the CodePen it has background-attachment:fixed;
因此,在CodePen中,它具有
background-attachment:fixed;
and the image stays put while the content above it scrolls. 并且当其上方的内容滚动时,图像保持原状。
Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed. 然后,您只需将内容容器放在页面上居中,避免溢出,并且随着内容的增长,页面将滚动,但是背景是固定的。
OK, first your code is a mess. 好的,首先您的代码是一团糟。 I recommend running your code through the w3 validator first.
我建议您首先通过w3验证器运行代码。
You have two options to do what you want, either using the background fixed & cover that you already have answers for: 您有两种选择来做您想做的事情,一种是使用背景固定的 封面 ,而背景已经覆盖了您的答案:
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;
}
or using overflow on the div with the content. 或在内容上使用div上的溢出 。
#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.