css sprites技术就是为了减少客户端与服务器端的响应时间来加快网站载入速度。其实这项技术很早就有，但却相当的实用，所以还是整理一下，顺当温习。

一般说来客户端与服务器端进行一次http请求大概需要0.2s左右的时间，客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。如果你的网站有过多的图片，必然会拖慢速度。css sprites 的原理就是把所以的小图片拼合成一张图片，然后通过background-position来定位每张小图片。画了张图片能更形象的帮助理解：

举个按钮hover效果实例：

CSS代码：

a{ width:100px;
 height:40px;
 background:url(/static/demo/g9net.gif) no-repeat;
 background-position:0 0;/*这个来定位*/
 display:block;
text-indent:-9999px;/*这样可以隐藏文字*/
}
a:hover{ background:url(/static/demo/g9net.gif) no-repeat;
 background-position:0 -40px;/*这个是hover状态的位置*/
 display:block;
}

html代码：

<p><a href="httP://www.g9net.com">G9neta>p>

这样原本需要进行两次请求变为了一次，当然了你可以将更多的小图片合成一种大图片。

有什么方法能快速的确定图片的background-position的值呢？

确实来确定background-position的值比较麻烦，不过可以通过这个链接能方便的进行拼合，关于它的介绍可以看这里

有那些网站使用了CSS sprites呢？

比如：Google picasa，可以看这张图片。

Yahoo.com首页，可以看这张图片。

当然了G9net也使用，还有很多，就不一一举例了。

css sprites存在的问题

维护不方便。

ie6会存在Background Flicker问题（影响不是很大。）解决的问题有很多方法可以参考：

Minimize Flickering CSS Background Images in IE6或者：

http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html

PS：啥时IE6才能退出市场啊，对因为IE6而折寿的人肯定不少。

如果还有问题请留言。

ENDING