在CSS中对背景图的作法.一般都是这样:
- 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坐标平铺.这样就达到我们要的效果了.
2011/08/23
博主，前段时间在你的博客上看到了CSS精灵实现WordPress Logo指针滑过变亮，移出变暗的效果，今天再来看看就找不到了。
能否告诉下地址
2009/09/06
很好，这就是css sprite吧
2009/05/05
呵呵，CSS Sprite~
2008/11/09
是啊，图片多的板子，确实需要这样