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% 屏幕尺寸且具有不同背景且可以接受内部任何 HTML 并适合所有屏幕尺寸的 div，则可以采用传统方法：

预览：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。

另外：

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

例如，如果您的内容在高度为 500 像素时溢出，请使用查询，例如

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

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

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