Question

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="final.css">
</head>

<body>
    <section id="container">

    <div id="sec1">
    </div>

    <div id="sec2">
    </div>

    </section>
</body>

</html>

CSS：

#container{
    margin-right: 10em;
    margin-left: 10em;
    border:1px dotted black;
    height: 62em;
}

#sec1{
    background: url('11.png') no-repeat left fixed;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    min-height: 62em;
    color:#fff;
    text-align:center;
}

#sec2{
    background: url('33.png') no-repeat right fixed;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    color:#fff;
    text-align:center;
}

我的第一张背景图像位于正确的左侧位置（11.png），但第二张背景图像根本看不到，我无法弄清楚出错的地方。我还是个新手，所以我不知道如何使用网格 - 所以我要将所有内容都包装在容器内。

Answer 1

第二个div没有高度。浮子可以很好地安排它们，但是给它们所需的高度和宽度，使它们具有可见的尺寸。

#sec1{
    background: url('11.png') no-repeat left fixed;
    color:#fff;
    text-align:center;
    min-height: 62em;
    float: left;
    width: 50%;
}

#sec2{
    background: url('33.png') no-repeat right fixed;
    color:#fff;
    text-align:center;
    min-height: 20em;
    float: right;
    width: 50%;
}

Answer 2

浮动divs

#sec1{
    background: url('11.png') no-repeat left fixed;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    min-height: 62em;
    color:#fff;
    text-align:center;
    float:left;
    width:50%
}

#sec2{
    background: url('33.png') no-repeat right fixed;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    color:#fff;
    text-align:center;
    float:right;
    width:50%;

}

试图并排浮动两个背景图像，我做错了什么？

2 个答案: