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上的标签$ text开始跨越背景1和背景2。如果我删除＆＃34;身高：100％＆＃34;或使用＆＃34; min-height：100％＆＃34;代替。每个背景图片永远不会全屏显示，但我不会得到我的标签＆amp;当我将浏览器窗口调整到较小的高度时，跨两个连续背景图像的文本。请帮忙

这是前两个图像背景的HTML。我需要每个图像背景在任何设备上全屏显示，我的文本字段在每个背景上都很好看。我的问题是，当我缩小浏览器的高度时，由于文本字段的高度＆gt;，一些文本将消失（由下一个背景覆盖）。浏览器的高度

<!-- 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伪标题{ 文本对齐：中心; 文本转换：大写; 字体重量：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，请考虑使用媒体查询。

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

等查询

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

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

然后，在视口最大宽度为500px之后，您的内容将不再是100％，而是与内部内容一样大。

css完整图像背景问题

1 个答案: