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

要在页面上拉伸它，您可以使用位置：绝对

<强> 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>

也许是这样的？

基本的CSS问题

3 个答案: