Question

我有一个容器，我有两个部分，我想一次显示一个。像This这样的滚动网页！

基本上我如何让第一个div元素（section）有自己适合屏幕的背景，第二个部分应该只有一个空白屏幕。非常感谢你！请举例说明：）

这是我的css：

* {
    box-sizing: border-box;
    /* look this up */
}

body {
    margin: 0;
}

/* style what the sections have in common */
.container {
    width: 100%;
    float: left;
    top: 0px;
    left: 0px;
    text-align: center;
    padding: 1em;

}


.about {

float:left;
height:auto;
width:100%;

background: url(10.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;




}

/* target specific sections */
.heads {
    background-color: red;
     float:left;
height:auto;
width:100%;
}

这是我的Html：

<body>

<section class="container about">
    About
</section>

<section class="container heads">
    About
</section>

</body>

Answer 1

您应该将您的正文和HTML高度设置为100％：

body, html {
  height: 100%;
    margin: 0;
}

然后将.about更改为：

.about {

float:left;
height:100%;
width:100%;

...}

注意：如果这是您要找的，请记住将其标记为正确。

Answer 2

.container{
    width: 100%;
    float: left;
    text-align: center;
    padding: 1em;
    background-position: center;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:100%;
}

.about{
    background: url(10.jpg);
}

.heads{
    background-color: red;
}

Answer 3

在.about班级

中添加此内容

background-size:100% 500px;

如何在div Container中指定背景图像高度

3 个答案: