css - 在 css 中带有居中容器的页面范围可重复背景

Question

我是 CSS 的新手，我总是尝试自己解决问题，但是这个问题让我陷入困境太久了……非常感谢您的一点帮助。 :-)

基本上，我需要做的是一个带有居中容器的页面，其中包含 4 个不同的部分，这些部分占容器宽度的 100%。现在，棘手的部分是:这 4 个部分中的每一个都有不同的纹理背景，这些背景延伸到居中容器之外并占据页面的 100% 宽度。

这是基本的线框:

http://i.imgur.com/Qlwjb.jpg

我想到了一些方法来做到这一点:

• 1:不用主容器，只制作 4 个占页面 100% 宽度的 div，应用它们的带纹理的背景，然后制作另外 4 个带有 .class 的 div，为它们提供宽度并使它们居中。这将解决问题，但问题是我必须尽可能避免制作额外的 div。 (我是一名学生，你看，我拥有的 div 越少，我的成绩就越好。:-/)

• 2:将包含所有 4 种纹理的垂直背景图像应用于 body ，并确保它仅在 X 轴上重复自身。这可能是最简单但最肮脏的方法:虽然 4 个部分应该有固定的高度，但如果我需要向其中一个添加一些东西，事情就会变得丑陋，我必须制作另一个适合的垂直 bg-image .

• 3 :可能是“最干净”的方法:将多个背景应用于 body ，并使它们从距顶部不同的距离开始，这样它们就不会重叠。但这正是我的 CSS 技能不足的地方:我不太确定该怎么做。另外，由于我是一名学生，为了获得更好的成绩，我必须在使用“高级”技术的同时尽量保持简单。这意味着:如果我选择将多个背景应用于 body ，我可能应该尝试使用包含所有 4 个背景的 Sprite :

http://i.imgur.com/Awr4L.jpg

...这对我来说又会让事情变得更加棘手。我只是不知道是否可以应用可重复的背景图像，并且如果应用它的元素(在本例中为正文)没有定义的大小，则只显示它的给定部分。有没有一种方法可以“裁剪”bg-image 并重复它而不给应用它的元素指定大小？

预先感谢您的帮助!

Answer 1

我认为解决方案 1 是可行的方法。我不会过分强调额外的 div - 如果设计要求每个部分都有自己的纹理背景，跨越页面的宽度，同时内容居中，那么额外的 div 是必要的。

其他选项涉及太多的试验和错误(你能确保一个部分的内容高度不会延伸超过下一个背景已经“神奇”定位的点吗？)。

过去我不得不做类似的事情。方法如下:

创建 4 个堆叠在一起的 div，宽度为 100%(div 的默认行为)

给每一个它自己的 css 类并将背景图像分配给该类。对于居中的内容，创建一个可重用的类 (.container)，它具有要在每个 div 中应用的全局样式(宽度:960px；边距:0 auto；)

所以你的标记看起来像 -

<div class="div1">
    <div class="container">Content for div 1</div>
</div>
<div class="div2">
    <div class="container">Content for div 2</div>
</div>
<div class="div3">
    <div class="container">Content for div 3</div>
</div>
<div class="div4">
    <div class="container">Content for div 4</div>
</div>

你的 css 应该是这样的 -

.div1 {
    background: url(../img/bgs/div1-bg.jpg) 0 0 repeat;
}

.div2 {
    background: url(../img/bgs/div2-bg.jpg) 0 0 repeat;
}

.div3 {
    background: url(../img/bgs/div3-bg.jpg) 0 0 repeat;
}

.div4 {
    background: url(../img/bgs/div4-bg.jpg) 0 0 repeat;
}

.container {
    width: 960px; //based on 960 grid
    margin:0 auto; // used to center the container based on it's width
}

使用设计所需的任何背景定位和重复规则，但这是一般的想法。

css 的目标是尝试识别常见的设计模式并使用类来尝试尽可能多地重用这些模式(如上面的容器类)——而不是为每个元素制作单独的样式。

我强烈建议您阅读 Jonathon Snooks Smacss和 this blog by Harry Roberts

希望对您有所帮助:-)