背景图宽度自适应及背景图合并的CSS思想

 关于宽度自适应，已经是前段开发人员必备的css技能之一，而背景图的合并则属于更高级别的要求。

我们为什么要宽度自适应，原因大体有以下几点：
第一：很多情况下有这样的需求，比如做B/S前端，90%以上要求整体宽度自适应。这种情况下大多数都采用了js框架，比喻Ext，Dojo等。而我们用CSS按自己的需求写一个自适应的页面，也是完全可以实现的，速度也会快的多。

第二：便于后期的维护，如果遇到需求变更的情况，比较容易维护。比如要增加内容而宽度变化，或者排版改变引起的宽度变化等等。

第三：很多情况下，用宽度自适应本身就减少了页面的工作量。我下面会用一个具体的例子来说明。

第四：使用宽度自适应，可以很好的跟背景图合并结合在一起，大大的减少了页面的图片数目和图片大小。大大提高页面的loading速度。

第五：由于有些难度，特别是背景图的合并，这两个技术已经成为前端高手不可缺少的额标志性技能。

废话不多说，用实例来说明问题。


这里我取了网页的一部分，实在是因为这个博客的图片大小要求，我不想损失过多的像素，于是取下一块。

从这短短的一小块，可以看到很明显的共同点：各个块的头尾部分差别只在字不同和长度不同。这种情况下，我们只要做好一个宽度可以自适应的，就可以分别设置不同的宽度来实现各个块。也就是做好一个，其他的复制就可以了，大大的减少工作量。（图片合并会在下一节中继续介绍）

先说下宽度自适应的思想。

实现想法这个是这样的，类似于此处的头和脚的效果，我们需要做三个标签的2层嵌套。最下面的额一层沿x轴平铺中间的背景，上面的两层分别设置左背景和右背景。 而对于中间的主体部分，可以看到两边都有一个小的渐变，我们的想法是用两个标签嵌套来实现，一个标签中放一边的渐变，取一小段，沿y轴平铺。

根据这个思想我们分别截取小图：分别是头的中间背景、头的左圆角、头的右圆角。相应的脚的中间背景、脚的左圆角、脚的右圆角。中间部分的左边渐变、中间部分的右边渐变。这八张小图暂时命名为bg_header.gif,bg_headerl.gif,bg_headerr.gif,bg_footer.gif,bg_footerl.gif,bg_footerr.gif,bg_l.gif,bg_r.gif。

细心的朋友可能发现我取的图有去的图右这么几个特点，第一：横排背景的宽度都相同，第二取脚上的小图时，把跟脚相连的亮边都截取出来，第三：我给他们命名的时候说暂时命名。这么做都是有原因的，也许看完整篇文章你就能明白。

做到这里，可以说是水到渠成了。
html：
<div class="part">
<!-- 这里是头部分 -->
<div class="header">
<div class="headerl">
<div class="headerr">

</div>
</div>
</div>
<!-- 这里是中间部分 -->
<div class="mainl">
<div class="mainr">
这里是中间部分的内容
</div>
</div>
<!-- 这里是脚部分 -->
<div class="footer">
<div class="footerl">
<div class="footerr">

</div>
</div>
</div>

</div>
对应的css设置：
/* set width in part */
.part {width:xxx;}
/* common css */
.header {background:url(../p_w_picpaths/bg_header.gif) 0 0 repeat-x;}
.headerl {background:url(../p_w_picpaths/bg_headerl.gif) 0 0 no-repeat;}
.headerr {background:url(../p_w_picpaths/bg_headerr.gif) right 0 no-repeat;height:44px;}
.footer {background:url(../p_w_picpaths/bg_footer.gif) 0 0 repeat-x;}
.footerl {background:url(../p_w_picpaths/bg_footerl.gif) 0 0 no-repeat;}
.footerr {background:url(../p_w_picpaths/bg_footerr.gif) right 0 no-repeat;height:28px;}
.mainl {background:url(../p_w_picpaths/bg_l.gif) 0 0 repeat-y;}
.mainr {background:url(../p_w_picpaths/bg_r.gif) right 0 repeat-y;}

看这段css大家能发现我这里的宽度设置只有一个，就是在.part里设置，内容部分的高度也没有设置，这时无论.part设置多宽，内容多高，效果都会自适应的。而html里完全可以复制代码的形式，实现不同的大小的相类似的块。

我在做可扩展的效果时，截取的头和脚部分的背景宽度都是5像素，就是为了做背景图的合并，一共有6张小图如下：










这六张图片分别对应了头部分平铺的背景，头左圆角，头右圆角。脚部分平铺的背景，脚左圆角，脚右圆角。 我们可以利用background-position的设置来实现把这六张小图合并成一张背景图。具体的步骤如下：

我们用Ps新建一个4px宽 216px高的背景图，把上面的六张小图从上到下依次排上。如下图：



我给它命名为bg_common.gif;有了这张图片，原来的六张小图就可以删掉了，这时候我们不需要对html文件做任何的修改，只需要修改css的响应部分就可以，具体修改如下：

被修改部分：
.header {background:url(../p_w_picpaths/bg_header.gif) 0 0 repeat-x;}
.headerl {background:url(../p_w_picpaths/bg_headerl.gif) 0 0 no-repeat;}
.headerr {background:url(../p_w_picpaths/bg_headerr.gif) right 0 no-repeat;height:44px;}
.footer {background:url(../p_w_picpaths/bg_footer.gif) 0 0 repeat-x;}
.footerl {background:url(../p_w_picpaths/bg_footerl.gif) 0 0 no-repeat;}
.footerr {background:url(../p_w_picpaths/bg_footerr.gif) right 0 no-repeat;height:28px;}

修改后的css：
.header {background:url(../p_w_picpaths/bg_common.gif) 0 0 repeat-x;}
.headerl {background:url(../p_w_picpaths/bg_common.gif) 0 -44px no-repeat;}
.headerr {background:url(../p_w_picpaths/bg_common.gif) right -88px no-repeat;height:44px;}
.footer {background:url(../p_w_picpaths/bg_common.gif) 0 -132px repeat-x;}
.footerl {background:url(../p_w_picpaths/bg_common.gif) 0 -160px no-repeat;}
.footerr {background:url(../p_w_picpaths/bg_common.gif) right -188px no-repeat;height:28px;}

也就是修改了background-position 的位置。

背景图合并之所以比较难于精通，是因为它是跟页面的制作思想紧密相连的，在页面实现之前就需要有一个成熟的想法是至关重要的。而这个走一步看三步甚至走一步看十步的本领，非经长时间的磨练是不会达到的，这里只是举了一个最简单最常用的例子。

比如：我们也可以把中间content部分两个repeat-y的背景合并，但是如果想要实现这种合并，我现在所用的标签嵌套布局方法是没法实现的。我至少需要给放置右边repeat-y的背景图设置一个专门有宽度的标签。
而我为什么放弃这种做法:

第一：如果专门设置一个标签放置这个背景，我必然要给这个标签设置高度来显示背景。但是我现在需要实现的效果时高度自适应的，也就是内容撑高高度，如果一定用这种方法必然需要用js来控制高度，实在是麻烦的很，并且因为少一个小图多了一段js也是得不偿失。

第二：用专门宽度的标签来放置repeat-y的标签，布局必然比我现在做的要麻烦。调试工作量自然多些。

第三：因为以上两种原因，沿y轴铺的背景图，很少做图片合并工作。当然排除极个别特例。所以在写html标签嵌套的时候基本上可以省略这步的思考。

这个是背景图合并的最基础的例子，也是基本功。好像是马步，可能你觉得没什么，不过练好了你才能使出更厉害的招数来