css - 没有拉伸(stretch)的全尺寸响应式背景图像

Question

我正在为网站使用整页滚动 https://github.com/peachananr/onepage-scroll

我试图为每个“页面”提供一个可调整大小的背景图像。我正在使用封面图像 CSS 规则，这适用于第一页，但不适用于其他任何页面。我做错了什么吗？这种方式不可能吗？

感谢任何帮助，谢谢:)

HTML

<section class="page1 ops-section" data-index="1"> </section>
<section class="page2 ops-section" data-index="2"> </section>
<section class="page3 ops-section" data-index="3"> </section>
<section class="page4 ops-section" data-index="4"> </section>
<section class="page5 ops-section" data-index="5"> </section>
<section class="page6 ops-section" data-index="6"> </section>

CSS

  .main section.page1 {
  background: url(bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  .main section.page2 {
  background: url(bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  .main section.page3 {
  background: url(bg3.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  .main section.page4 {
  background: url(bg4.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  .main section.page5 {
  background: url(bg5.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  .main section.page6 {
  background: url(bg6.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

如果您希望页面具有可调整大小的背景图片，那么您使用的 CSS 似乎是合适的。

但是，您将此类应用于没有固定高度且没有显示 block 的部分。

HTML:

<section class="page1 ops-section" data-index="1"> </section>

CSS:

.main section.page2 {
  background: url(bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

只需查看以下 fiddle 中标题为“page1”和“page2”的部分之间的区别。 Page2 部分有显示 block 和固定高度，背景图像可见。

http://jsfiddle.net/Nst62/

实现可调整大小的背景图像封面样式的更明智的方法是将其应用于 HTML 标记(参见下面的 fiddle )。

http://jsfiddle.net/pTQQ4/

这样您就不必确保该部分必须“填满”浏览器窗口的整个高度。