php - 基本的 CSS 问题

Question

很抱歉浪费时间在这个上。我一直试图让一个页面在css中堆叠背景颜色，我只是不知道如何询问如何做到这一点。例如，我想要一个白色标题部分，其高度可能为 150 像素，然后在其正下方有一个特定颜色，高度可能为 20 像素并拉伸页面的宽度，然后重复这两个或三个以上使用其他颜色的时间，然后以另一个大的白色页脚结束。很难知道该怎么称呼这个。我认为我不需要任何东西来漂浮，就像美国国旗上的白色和红色一样堆叠。有什么想法吗？

Answer 1

你试过什么吗？

<div style="height: 150px; background: #fff;"></div>
<div style="height: 20px; background: red;"></div>
<div style="height: 20px; background: blue;"></div>
<div style="height: 150px; background: #fff;"></div>

Answer 2

要在页面上拉伸它，您可以使用 position:absolute

CSS

#container {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.white {
    background:white;
    height: //height;
}
.blue {
    background:blue;
    height: //height;
}
.red {
    background:red;
    height: //height;
}

HTML

<div id="container">
    <div class="white"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="white"></div>
</div>

Answer 3

如果您希望红色白色和蓝色重复，您可以使用具有红色白色和蓝色的一个“重复”的背景图像和background: repeat-y. 如果您不希望它重复整个页面高度，您可以将它放在一个 div 中并控制高度。

<div style="height:80%; background:url('flag.png') repeat-y;></div>

也许是这样的？