基本的 CSS 问题 - basic CSS issue

basic CSS issue

本文关键字：问题 CSS | 更新日期: 2023-09-27

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

你试过什么吗？

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

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

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

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

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

也许是这样的东西？