css - 具有不同类型背景的页面分为水平部分

Question

我警告过你，我可能有点含糊

无论如何，我所追求的是那些填满整个屏幕的页面，但是如果您向下滚动并进入不同的部分（某些特定内容或只是一个页脚），它会通过具有不同的背景而脱离以前的内容。抱歉，如果我睡在上面，我可能会想出更好的解释和/或示例页面。

这种风格有名字吗？它是怎么做的？如果它需要响应？

谢谢

Answer 1

是的。这很简单。像这样设置，并根据您的内心进行定制。

<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>

<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>

<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>

<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>

CSS：

.container {
    width: 100%;
    text-align: center;
}

.wrapper {
    margin: 0px auto;
    width: 70%;
    text-align: left;
}

父（容器）<div>将拉伸到 100% 的页面宽度。子（包装器）<div>将拉伸到其父级的 70%（或者，您可以将其设置为固定像素尺寸并根据屏幕尺寸进行更改）并将居中。您将装饰背景应用于父级，.container例如：

#header {
    background: #ff0000;
}

#footer {
    background: #000;
}

#content {
    background: url(img/bg_pattern.gif);
}

#feature_area {
    background: url(img/hero_feature_img.jpg) top center no-repeat;
}