基本的 CSS 问题答案

【问题标题】：basic CSS issue基本的 CSS 问题
【发布时间】：2012-05-24 14:26:14
【问题描述】：

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

【问题讨论】：

标签： php html colors css background

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

也许是这样的？

【讨论】：