css sprites的真谛
这篇文章的题目是css sprites的真谛，但是我承认，“真谛”这个词语，是为了吸引人的。不过从内容上来说，我认为，这篇文章可以说的上能够描述它的本质的。
事实上，CSS Sprites并不是什么高深的技术，它最多只能称得上技巧。
首先我们先来看一个例子：
在yahoo的首页的右侧的用户面板部分，用了六个小图标：
这六个小图标是一个一个独立的文件吗？看一下http://l.yimg.com/a/i/ww/t7/pa-icons2.gif这个图片就知道了，从这个图，很容易就能够看出，雅虎首页的icon都在这个文件上，它是通过用css调用文件的不同位置来控制表现的。这种方法就是CSS Sprites。
雅虎首页调用的还有另外一个文件 http://l.yimg.com/a/i/ww/thm/1/grd-1px_1.4.gif 这个文件简单的来说就是一个线，是一张4px宽，4300px高的透明gif图片。这个图片就是yahoo首页所有用到背景图片的地方的唯一背景图片。使用的方法也是背景图片的定位。
.btn-more-2, .hd li.on em, div.hd li.sparkle a, .hd, #mastheadbd .top, #mastheadbd, #doors li a, #today .ft li.on a, #mastheadbd .mh_footer, #mastheadft{background-image:url(http://l.yimg.com/a/i/ww/thm/1/grd-1px_1.4.gif);background-repeat:repeat-x;}
上面就是其中的一段代码。然后再独立定义具体的样式的background-position属性，比如
#mastheadbd .mh_footer {
background-position:0pt -1336px;margin-top:2px;}
CSS Sprites就是这么简单。它的核心思想就是，把很多有相同属性或用途的图片集成到一张图片中来通过背景图片的定位来分别调用。
到目前为止，我所见过的，最成功的使用了css sprites方法的是126邮箱，大家看一下这张图片就知道了：http://p.mail.163.com/dm3style/lib/0806191236/126green/f1.gif
还有一点要注意的是，尽量不要将repeat的图片和no-repeat的图片放在一起使用，这样不容易控制样式的某些表现，比如iphone来浏览的话就会出问题，而且从126和yahoo的页面中也很容易看出来，repeat和no-repeat的图片是分离的。
PS：其实我之前也写过CSS Sprites的东东的，但是前一段数据库丢掉的时候，文章也给搞丢了，而我在最近看流量统计的时候，看到这个关键词来的访问很多，就觉得，这个话题还是挺受欢迎的，就又详细的写了一篇。
这东西 主要还是为了减少链接数吧
jquery UI 中也使用复杂的sprite