HTML基础（四）：CSS中关于背景图的应用技巧，把很多图片聚合的一张图片中

原文地址：http://leotheme.cn/javascript/about-css-background.html

在CSS中对背景图的作法.一般都是这样:

1. background: url(images/*.gif) no-repeat;

但有时候有很多图片的时候,像我的Maxthon主题,就用了很多的背景图和图标.这时候如果还这样做的话就会带来一个问题,图片在加载中会有个过程.虽然很快.但有的图片在一开始并没有加载进来,而是在响应鼠标事件时才开始加载.像我的导航栏。默认是一个背景，鼠标放上去是一个背景，当前页又是另一个背景。

这时如果还像普通的处理的话,当鼠标放上去后,并不能马上看到图片.所以在Maxthon 2.0中我已经不用以前的方法来做了.而是选择把所有的背景图片放到一张图上.就像下面这样.

放到一起后，当鼠标放上去后而不用向服务器请求,因为图片已经在第一次就已加载完成，不会产生延迟的效果.这样做还有个好处，就是可以减少向服务器请求的次数，从而使加载更快。

现在来说说放到一张图上后，CSS中该怎么定义?

以我的导航栏为例:
假如我们在做图的时候,图片的上面是默认时的背片,中间是鼠标放去时的.下面是当前页码的.图片的高度是30PX;那么这张图的总高度是90PX;
然后我们在CSS中这样写:

[sourcecode lang="css"]#nav li a {background: url(images/bg_nav.gif) 0 0 repeat-x;}默认时的
#nav li a:hover {background: url(images/bg_nav.gif) 0 -30px repeat-x;}鼠标放上去时的
#nav li a .current {background: url(images/bg_nav.gif) 0 -60px repeat-x;}当前页效果的[/sourcecode]

我们在CSS中定义的背景图都是同一张,我们通过改变他的Y座标起始位置来定位.因为我们的高度已经是固定了的30PX,和图片的高度是一样的.然后让它沿X坐标平铺.这样就达到我们要的效果了.