在前面的各种布局案例中，都是使用带有边框的圆角框实现的。可以发现，所有的例子都没有设置背景色，但是在很多页面布局中，对各列的背景色是有要求的，例如希望每一列都有各自的背景色。

前面案例中每个布局模块都有非常清晰的边框，这种页面通常不设置背景色。还有很多页面分了若干列，每一列或列中的各个模块并没有边框，这种页面通常需要通过背景色来区分各个列。

下面就来对页面布局中的分栏背景色问题进行一些讲解。为了简化页面，我们首先制作一个如图1所示的页面。

图1 基本的三列布局

这是一个很简单的“1-3-1”布局页面，通过前面的学习，相信读者都可以用各种办法制作出这个页面。本文件位于网页学习网CSS教程资源中“第14章\1-3-1\背景色\basic.htm”。

一、固定宽度布局的列背景色设置

这里先假设它是固定宽度的，总宽度760像素，左右列各200像素，中间列360像素。使用绝对定位的方式布局。lodidance.com

本案例文件位于网页学习网CSS教程资源中“第14章\1-3-1\背景色\fixed.htm”。

HTML部分代码如下：

CSS样式代码如下：

可以看到，各列的背景色只能覆盖到其内容的下端。而不能使每一列的背景色都一直扩展到最下端。这个要求在表格布局的方式中，是很容易实现的，而在CSS布局中，却不是这样。根本的原因在于，表格会自然地使各列等高，而每个div只负责自己的高度，根本不管它旁边的列有多高，要使并列的各列的高度相同是很困难的。lodidance.com

解决问题的思路之一是想办法使各列等高。有很多Web设计师从这个思路出发，并透过使用JavaScript配合。找到了解决方法。但是这里我们通过单纯的CSS来解决这个问题。

如果是各列固定宽度的布局方式，就很容易通过另一种思路来解决这个问题，即通过“背景图像”法。例如，在本例中，已经知道3列的宽度依次为200像素、360像素和200像素，就可以在Fireworks或者Photoshop等图像处理软件中制作一个760像素宽的图像，通过竖向平铺图像来产生各列的分隔效果。

例如，图2中显示的是一个760像素宽、10像素高的图像。

图2 背景图像
 

将上面代码中的3列div的背景色设置全部去掉，然后将container这个容器div的背景设置为“url(background-760.gif)”，即该图像文件构路径。这时在浏览器中的效果如图3所示。

图3 使用了背景图像的分列效果

现在无论一列的高度是多少，背景色都可以一直贯穿到底。用这种办法还可以制作出一些更精致的效果，例如为背景图像制作一些投影的效果，这时产生的效果页面的感觉一下精致了不少。

http://www.csszengarden.com/?cssfile=026/026.css所示的是“CSS掸意花园”同站的第026号作品，是由设计师Radu Darvas设计的。可以看到，通过非常精致的设计，页面的分栏取得了出人意料的效果，在视觉上摆脱了固定的“框”通常成生的呆板的样式，而形成了重叠的效果。这种效果表现了光和影之间、形状和空间之间的相互影响，给人清新、明朗、积极的印象。

从这个例子可以看出，只有技术和艺术的完美结合，才能创造出真正打动人心的作品。

从技术角度说，上面介绍的方法适用于各列宽度固定的布局。无论是使用浮动方式布局，还是绝对定位方式布局，对于上面这种背景图像平铺的方法都是适用的。

二、特殊宽度变化布局的列背景色设置

在解决了固定宽度的分栏背景色问题之后，再来考虑宽度变化的布局分栏背景色问题。如果列宽不确定，就无法在图像处理软件中制作这个背景图．那么应该怎么办呢？

假设有如下3个条件：

 (1) 两侧列宽度周定，中间列变化的布局；

(2) 3列的总宽度为100%，也就是说两侧不会露出body的背景色；

(3) 中间列最高。

如果满足了这3个条件，就可以利用body来实现右侧栏的背景。另外，中间列的高度最高，可以设置自己的背景色，左侧可以使用container来设置背景图像。

具体方法如下。

首先制作一个与左列宽度相同的背景图片，按照上面的方法竖向平铺，左列就设置好了。而中间列由于高度最大，直接设置背景色即可。然后将body的背景色设置为右栏的背景色。

例如，http://www.lodidance.com/中所示的这个页面一共包括3个竖列和1个横行，整个页面被分为了4个部分，这4个部分各使用一种颜色作为背景色。可以看到，整个页面横向撑满这个页面，对于这样的页面，就可以使用上面介绍的这种方法来实现各栏的背景色。

三、单列宽度变化布局的列背景色设置

上面例子虽然实现了分栏的不同背景色，但是它的限制条件太多了。能否找更通用一些的方法呢？

仍然假设布局是中间活动，两侧列宽度固定的布局。由于container只能设置一个背景图像，因此可以在container里面再套一层div，这样两层容器就可以各设置一个背景图像，一个左对齐，一个右对齐，各自竖直方向平铺。由于左右两列都是固定宽度，因此所有图像的宽度分别等于左右两列的宽度就可以了。

假设将上面完全固定的布局改为：3列总宽度为浏览器窗口宽度的85%，左右列各200像素，中间列自适应。本案例文件位于网页学习网CSS教程资源中的“第14章\1-3-1\背景色\center-liquid.htm”。

代码稍作修改，header、footer和container的宽度改为85%，然后在container里面套一个innerContatiner，设置为：

这样效果注意contatiner和innerContainer的背景图像设置方法，右边的背景图像除了设置竖向平铺之外，还要确定左对齐还是右对齐。

四、多列等比例宽度变化布局的列背景色设置

对于3列按比例同时变化的布局，上面的方法就无能为力了。这时可以采用如下方法。

假设3列按照“1：2：1”的比例同时变化，也就是左、中、右3列所占的比例分别为25%、50%和25%。

制作方法是，制作一个很宽的背景图像，背景图像同样按照“1：2：1”设置3列的颜色。

例如图像宽度是2000像素，高度10像素，左、中、右3段颜色的宽度分别是500像素、1000像素和500像素。中间段必须使用透明色，最终生成一个中间1000像素透明，两侧各500像素不同颜色的GIF格式图像文件。

对于网页的代码，仍然保持使用container和innerContainer两层容器，这两个容器的背景图像都设置为上面制作的这个文件。下面进行关键操作。

现在请读者回忆一下，是否前面介绍过相似的方法。

将contatiner这个div的背景图像的水平定位值设置为25%，这样就会正好将图像左侧起25%（即500）的像素与该div的25%位置对齐。同理，将innerContainer的背景图像的水平位置设置为75%，就可以使右侧列的背景正好对上。实际上这两个背景图像是同一个图像，也就是一个图像错动了一定的位景并重叠显示。但由于图像做得很宽，并且中间是透明的，因此并不会看到重叠现象发生。但是如果中间不是透明的，就会盖住下面的图像了，因此中间段的颜色必须是透明的。lodidance.com

前面请读者思考了这种方法是否前面曾经使用过？没错，如果读者仔细分析一下这种方法的本质，实际上它就是一个“滑动门”技术的变化应用。所以“滑动门”技术是一个CSS效果的非常有用的基础性方法，通过灵活地应用“滑动门”技术，可以制作出很多不容易实现的效果。

这种方法的原理。长条矩形表示一个背景图像，两端阴影部分为各25%的背景色部分，中间白色是透明部分，两条竖直的虚线表示定位的基准线，上面的背景图像代表的是右侧列的背景图像，以右侧的基准线定位，下面的背景图像是左侧的背景图像，以左侧的基准行定位。中间的大矩形表示3列的容器div，超过它范围的部分都不会被显示。

当左右的图像都竖直平铺以后，可以看到两侧的背景图像就这样实现了上面可能到的效果。

本案例文件位于网页学习网CSS教程资源的“第14章\1-3-1\背景色\all-liquid.htm”。代码如下。

要特别注意的是，其中：

这个语句中要先写25%，它的后面写top，而不要写成：

如果写反了，在Firefox中将不显示背景图像（在IE中仍然可以正确显示）。上面代码中有两个类似的语句，都要注意这一点。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表