css全图背景问题

Question

我的网页有 4 张背景图片，每张都需要全屏。在每个背景上，我都有一些标签和文本。这是CSS代码，我会在代码部分之后解决这个问题。

html{
    height:100%;
}

body{
    font-family:'Roboto', sans-serif;
        color:#fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    height:100%;
}

.section{
    background-attachment:inherit;
    background: no-repeat center center fixed;
    height:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
}

通过使用这种风格。所有背景图片都可以全屏显示。但是，当我将浏览器窗口调整为较小的高度时，背景 1 上的标签 $ 文本开始跨越背景 1 和背景 2。 如果我删除“height:100%”或改用“min-height:100%”。每个背景图像永远不会全屏显示，但是当我将浏览器窗口调整为较小的高度时，我不会在两个连续的背景图像中显示我的标签和文本。请帮忙

这是我的前两个图像背景的 HTML。我需要每个图像背景在任何设备上全屏显示，我的文本字段在每个背景上看起来都不错。我的问题是，当我缩小浏览器的高度时，由于文本字段的高度 > 浏览器的高度，一些文本会消失(被下一个背景覆盖)

<!-- Page Top Section -->
<div id="page-top" class="section" data-background-image="/images/background/page-top.jpg" style='background-image: url("/images/background/page-top.jpg");'>
    <div class="pattern height-resize">
        <div class="container">
            <h1 class="site-title">
                hello I am site title
            </h1><!-- /.site-title -->
            <h2 class="section-title">
                hello I am section-1
            </h2>

            <div class="next-section">
                <a class="go-to-about"><span></span></a>
            </div><!-- /.next-section -->

        </div><!-- /.container -->
    </div><!-- /.pattern -->        
</div><!-- /#page-top -->
<!-- Page Top Section  End -->


<!-- About Us Section -->
<section id="about" class="section" data-background-image="/images/background/about-us.jpg" style='background-image: url("/images/background/about-us.jpg");'>
    <div class="pattern height-resize"> 
        <div class="container">
            <h3 class="section-name">
                <span>
                    SECTION NAME
                </span>
            </h3><!-- /.section-name -->
            <h2 class="section-title">
                SECTION TITLE
            </h2><!-- /.Section-title  -->
            <p class="section-description">
                FJDKLASJLKFJASDKLJFLKSJFLKDJSAKLFJDLKSAJ
            </p><!-- /.section-description -->

            <div class="next-section">
                <a class="go-to-subscribe"><span></span></a>
            </div><!-- /.next-section -->

        </div><!-- /.container -->
    </div><!-- /.pattern -->


</section><!-- /#about -->
<!-- About Us Section End -->

节标题CSS: .section-title{ 文本对齐:居中； 文本转换:大写； 字体粗细:300； 字体大小:80px；

Answer 1

如果您想要四个 100% 屏幕宽度和高度的 div，具有不同的背景，可以在其中接受任何 HTML 并适合所有屏幕尺寸，有传统的方法可以做到这一点:

预览:http://codepen.io/kunokdev/pen/LRPPdO

HTML:

<section>
  <div>Any HTML inside a first div w/ background</div>
  <div>Any HTML inside a second div w/ background</div>
  <div>Third is here too!</div>
  <div>
    <h1>Forth</h1>
    <p>Forth has even more than that!</p>
  </div>
</section>

CSS:

html, body {
  height: 100%;
}
section {
  height: 100%;
}
 div {
   height: 100%;
   background-size: cover;
 }
div:nth-child(1){
  background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(2){
  background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
div:nth-child(3){
  background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(4){
  background-image: url('http://i.imgur.com/sznCGw4.jpg');
}

否则用viewport单位:

HTML:

<div></div>
<div></div>
<div></div>
<div></div>

CSS:

div {
  height: 100vh;
}

所以我认为您还需要 background-size: cover; 和一些 background-position 属性。如果您的内容溢出，请考虑使用 overflow: auto。

另外:

如果您的视口(viewport)高度和宽度小于容器内的 html，请考虑使用媒体查询。

例如，如果您的内容在高度为 500px 时溢出，请使用诸如

之类的查询

media only screen and (max-width: 500px){
  div {
    height: auto;
  }
}

测试时考虑使用 Mozilla Firefox 响应式设计 View 。 Chrome 中也存在类似的功能。

那么在视口(viewport)最大宽度为 500px 之后，您的内容将不再是 100%，而是与内部内容一样大。