如何在滚动内容中使用 100% CSS 背景图像？
Posted
技术标签:
【中文标题】如何在滚动内容中使用 100% CSS 背景图像？【英文标题】：How to use 100% CSS background-image with scrolling content? 【发布时间】：2013-10-14 15:40:59 【问题描述】：我想创建一个具有始终填满整个窗口的背景图像的站点，即使内容可以垂直滚动。
我使用 background-size:cover 创建了this JSFiddle 以将背景图像缩放到窗口。
只要里面的 div 比窗口小，它就可以工作。 如果您垂直滚动，则背景图像不再填满页面，而是显示白色/灰色区域。
所以我的问题是：如何将 100% 背景图像与滚动内容结合起来？ 这是我的 CSS：
html
height: 100%;
margin:0px;
background-color:#999999;
background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
background-position:center;
background-repeat:no-repeat;
background-size: cover;
body
min-height: 100%;
margin:0px;
#appcontainer
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
还有 HTML：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="appcontainer">
This div causes the background image to stop scaling to the page.
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：使用background-attachment: fixed;
Demo
html
height: 100%;
margin:0px;
background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
另外，我不明白你为什么在包装元素上使用position: absolute;，通常你应该使用position: relative;
【讨论】：
谢谢，它现在可以工作了 :) 为什么使用相对而不是绝对？ @PietBinnenbocht 这是lil详细的定位概念，阅读一些文章你就会明白我的意思，为什么不使用absolute，因为你做的事情似乎不需要使用absolute :) 【参考方案2】：添加到您的 CSS：
background-attachment: fixed;
【讨论】：
【参考方案3】： #appcontainer
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
right 0;
left: 0;
bottom 0;
【讨论】：
以上是关于如何在滚动内容中使用 100% CSS 背景图像？的主要内容，如果未能解决你的问题，请参考以下文章