Question

我正在使用网页https://github.com/peachananr/onepage-scroll

的整页滚动

我试图给每个＆＃34;页面＆＃34;可调整大小的背景图像。我使用封面图片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似乎是合适的。

但是，您已将此类应用于没有固定hieght但没有显示块的部分。

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

只需看看标题为“第1页＆＃39;”的部分之间的区别。和＆＃39;第2页＆＃39;在下面的小提琴。 Page2部分具有显示块和固定高度，背景图像可见。

http://jsfiddle.net/Nst62/

实现可调整大小的背景图像封面样式的更明智的方法是将其应用于HTML标记（请参阅下面的小提琴）。

http://jsfiddle.net/pTQQ4/

这样您就不必确保该部分必须填写＆＃39;浏览器窗口的整个高度。

全尺寸响应背景图像，无拉伸

1 个答案: