1

我对 CSS 很陌生，我总是尝试自己解决问题，但是这个问题让我陷入了太长时间......非常感谢您的帮助。:-)

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

这是基本的线框图：

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

我想到了一些说来做到这一点：

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

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

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

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

......这又会让我觉得事情变得更加棘手。我只是不知道是否可以应用可重复的背景图像，并且如果应用它的元素（在本例中为主体）没有定义的大小，则只显示它的给定部分。有没有办法“裁剪”一个 bg 图像并重复它而不给它所应用的元素一个大小？

在此先感谢您的帮助！

4

1 回答 1

0

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

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

过去我不得不做类似的事情。就是这样：

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

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

所以你的标记看起来像 -

<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和Harry Roberts 的博客

希望有帮助:-)

于 2013-07-14T06:51:29.397 回答