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

Question

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

无论如何，我所追求的是那些填满整个屏幕的页面，但是如果您向下滚动并来到不同的部分(某些特定内容或只是一个页脚)，它会通过有一个不同的背景。 抱歉，如果我睡着了，我也许可以想出更好的解释和/或 example page .

该样式有名称吗？它是如何完成的？如果它需要响应？

谢谢

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> s 将拉伸(stretch)到 100% 页面宽度。 child (包装)<div> s 将拉伸(stretch)到其父级的 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;
}