Question

以下是我尝试将此全屏图像应用于的页面： http://www.alexwiley.co.uk/portfolio

我希望这样做，使图像显示100％宽度和100％高度，直到向下滚动，然后在滚动时可以看到下面的内容。

以下是我要查看的示例网站： http://www.nilsfrahm.com/

你可以看到他的图像是全屏的，直到他滚动。

我在Adobe Muse CC中创建这个网站只是作为补充信息。

Answer 1

你需要使用background-attachment：fixed; with background-image and background-size：cover;

大屏幕版本：http://codepen.io/suez/full/wulBv/

＆＃13;

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

＆＃13;

<div class="first"></div>
<div class="second"></div>

＆＃13;

Answer 2

尝试将position: fixed添加到具有背景的div。

我想要全屏制作图像，直到我滚动

2 个答案: