6

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

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

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

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

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

4

2 回答 2

10

您需要使用背景附件：固定；带有背景图像和背景尺寸：封面；

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

于 2014-09-18T18:25:58.010 回答
0

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

于 2014-09-18T18:22:55.667 回答