|
在前面的各种布局案例中，都是使用带有边框的圆角框实现的。可以发现，所有的例子都没有设置背景色，但是在很多页面布局中，对各列的背景色是有要求的，例如希望每一列都有各自的背景色。 前面案例中每个布局模块都有非常清晰的边框，这种页面通常不设置背景色。还有很多页面分了若干列，每一列或列中的各个模块并没有边框，这种页面通常需要通过背景色来区分各个列。 下面就来对页面布局中的分栏背景色问题进行一些讲解。为了简化页面，我们首先制作一个如图1所示的页面。
这是一个很简单的“1-3-1”布局页面，通过前面的学习，相信读者都可以用各种办法制作出这个页面。本文件位于网页学习网CSS教程资源中“第14章\1-3-1\背景色\basic.htm”。 一、固定宽度布局的列背景色设置 这里先假设它是固定宽度的，总宽度760像素，左右列各200像素，中间列360像素。使用绝对定位的方式布局。lodidance.com 本案例文件位于网页学习网CSS教程资源中“第14章\1-3-1\背景色\fixed.htm”。 HTML部分代码如下： 折叠展开XML/HTML 代码复制内容到剪贴板
CSS样式代码如下： 折叠展开CSS 代码复制内容到剪贴板
可以看到，各列的背景色只能覆盖到其内容的下端。而不能使每一列的背景色都一直扩展到最下端。这个要求在表格布局的方式中，是很容易实现的，而在CSS布局中，却不是这样。根本的原因在于，表格会自然地使各列等高，而每个div只负责自己的高度，根本不管它旁边的列有多高，要使并列的各列的高度相同是很困难的。lodidance.com 解决问题的思路之一是想办法使各列等高。有很多Web设计师从这个思路出发，并透过使用JavaScript配合。找到了解决方法。但是这里我们通过单纯的CSS来解决这个问题。 如果是各列固定宽度的布局方式，就很容易通过另一种思路来解决这个问题，即通过“背景图像”法。例如，在本例中，已经知道3列的宽度依次为200像素、360像素和200像素，就可以在Fireworks或者Photoshop等图像处理软件中制作一个760像素宽的图像，通过竖向平铺图像来产生各列的分隔效果。 例如，图2中显示的是一个760像素宽、10像素高的图像。
将上面代码中的3列div的背景色设置全部去掉，然后将container这个容器div的背景设置为“url(background-760.gif)”，即该图像文件构路径。这时在浏览器中的效果如图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，设置为： 折叠展开CSS 代码复制内容到剪贴板
这样效果注意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两层容器，这两个容器的背景图像都设置为上面制作的这个文件。下面进行关键操作。 现在请读者回忆一下，是否前面介绍过相似的方法。 注意：背景图片的定位使用“百分比定位”，而不是通常的绝对像素值。 当设置背景图像时，如果使用像素值设置背景的位置，那么图像的左上角会定位在距离元素（如一个div）左上角指定像素数的地方；如果使用百分数定位，就会对图像上的对应点进行定位。例如，如果为一个div设置背景图像，并将水平位置设为25%，那么将会把这个图像距离左侧25%的位置定位到div距离左侧边界25%的位置。这是一个很有趣的特性。 将contatiner这个div的背景图像的水平定位值设置为25%，这样就会正好将图像左侧起25%（即500）的像素与该div的25%位置对齐。同理，将innerContainer的背景图像的水平位置设置为75%，就可以使右侧列的背景正好对上。实际上这两个背景图像是同一个图像，也就是一个图像错动了一定的位景并重叠显示。但由于图像做得很宽，并且中间是透明的，因此并不会看到重叠现象发生。但是如果中间不是透明的，就会盖住下面的图像了，因此中间段的颜色必须是透明的。lodidance.com 前面请读者思考了这种方法是否前面曾经使用过？没错，如果读者仔细分析一下这种方法的本质，实际上它就是一个“滑动门”技术的变化应用。所以“滑动门”技术是一个CSS效果的非常有用的基础性方法，通过灵活地应用“滑动门”技术，可以制作出很多不容易实现的效果。 这种方法的原理。长条矩形表示一个背景图像，两端阴影部分为各25%的背景色部分，中间白色是透明部分，两条竖直的虚线表示定位的基准线，上面的背景图像代表的是右侧列的背景图像，以右侧的基准线定位，下面的背景图像是左侧的背景图像，以左侧的基准行定位。中间的大矩形表示3列的容器div，超过它范围的部分都不会被显示。 当左右的图像都竖直平铺以后，可以看到两侧的背景图像就这样实现了上面可能到的效果。 本案例文件位于网页学习网CSS教程资源的“第14章\1-3-1\背景色\all-liquid.htm”。代码如下。 折叠展开CSS 代码复制内容到剪贴板
要特别注意的是，其中： 折叠展开CSS 代码复制内容到剪贴板
这个语句中要先写25%，它的后面写top，而不要写成： 折叠展开CSS 代码复制内容到剪贴板
如果写反了，在Firefox中将不显示背景图像（在IE中仍然可以正确显示）。上面代码中有两个类似的语句，都要注意这一点。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/949.html |
14.4 分列布局背景色问题