Question

我对CSS很陌生，我总是试图自己解决问题，但这个问题让我陷入了太长时间......一点帮助都会非常感激。： - ）

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

这是基本的线框：

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

我想到了一些人说这样做：

•1：不要使用主容器，只需要制作4个占用100％页面宽度的div，应用它们的纹理背景，然后使用.class创建另外4个div，它们会给它们一个宽度并使它们居中。这可以解决问题，但问题是我必须尽可能避免增加额外的div。（我是学生，你看，而且我的div越少，我的成绩就越好。： - /）

•2：将包含所有4个纹理的垂直背景图像应用到主体，并确保它仅在X轴上重复。这可能是最简单但最脏的方法：虽然4个部分应该有固定的高度，如果我需要在其中一个部分添加东西，事情就会变得丑陋而且我不得不另辟蹊径适合的垂直bg图像。

•3：可能是最干净的＆＃34;这样做的方法：在身体上涂抹多个背景，让它们从距离顶部不同的距离开始，这样它们就不会重叠。但那就是我的CSS技能不足之处：我不太清楚如何做到这一点。此外，由于我是一名学生，我必须尽量保持简单，同时使用＆＃34; advanced＆＃34;技术，以获得更好的成绩。这意味着：如果我选择将多个背景应用于身体，我应该尝试使用包含所有4个背景的精灵：

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

......这会让事情变得更加棘手。我只是不知道是否可以应用可重复的背景图像，只有在它应用的元素（在这种情况下，身体）没有＆＃时才显示它的给定部分39; t有一个确定的大小。有没有办法去＆＃34;庄稼＆＃34;一个bg图像并重复它而不给它应用的元素大小？

提前感谢您的帮助！

Answer 1

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

其他选项涉及过多的试验和错误（你能否确保一个部分的内容高度不会超过下一个背景的位置？＃34;神奇地定位？）。

我过去不得不做类似的事情。以下是：

创建堆叠在彼此顶部的4个div，以100％宽度（div的默认行为）

给每个人自己的css类并将背景图像分配给该类。对于居中的内容，创建一个可重用的类（.container），它具有要在每个div中应用的全局样式（宽度：960px; margin：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

希望有所帮助： - ）

页面范围的可重复背景，中心容器在css中

1 个答案: