以下是我尝试将此全屏图像应用于的页面: http://www.alexwiley.co.uk/portfolio
我希望这样做,使图像显示100%宽度和100%高度,直到向下滚动,然后在滚动时可以看到下面的内容。
以下是我要查看的示例网站: http://www.nilsfrahm.com/
你可以看到他的图像是全屏的,直到他滚动。
我在Adobe Muse CC中创建这个网站只是作为补充信息。
答案 0 :(得分:8)
你需要使用background-attachment:fixed; with background-image and background-size:cover;
大屏幕版本:http://codepen.io/suez/full/wulBv/
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
div {
width: 100%;
height: 100%;
}
div.first {
background-image: url("http://i.imgur.com/PbV1Grl.jpg");
background-attachment: fixed;
background-size: cover;
}
div.second {
background-image: url("http://i.imgur.com/VWYl1EC.jpg");
background-size: cover;
}

<div class="first"></div>
<div class="second"></div>
&#13;
答案 1 :(得分:0)
尝试将position: fixed
添加到具有背景的div。