我想全屏显示图像，直到滚动答案

【问题标题】：I want to make an image fullscreen until I scroll我想全屏显示图像，直到滚动
【发布时间】：2016-06-08 18:56:57
【问题描述】：

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

我希望让图像显示 100% 的宽度和 100% 的高度，直到您向下滚动，然后您可以在滚动时看到其下方的内容。

这是我想要做的一个示例网站： http://www.nilsfrahm.com/

在他滚动之前，您可以看到他的图像全屏显示。

我正在 Adobe Muse CC 中制作这个网站，就像添加信息一样。

【问题讨论】：

我想你可以试试 possition: fixed of a div that has the background;
记录在案，Nils Frahm 规则：D

标签： html css image fullscreen muse

【解决方案1】：

你需要使用 background-attachment: fixed;带有背景图像和背景尺寸：封面；

大屏版：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>

【讨论】：

【解决方案2】：

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

【讨论】：