开篇先举个例子，假如你要从食堂送一些盒饭到每个寝室，你是用：得知订单中17#3单元3号寝室需要盒饭，然后你从食堂拿了一个盒饭送到该寝室，然后从订单中得知4号寝室也要盒饭，然后你有回到食堂拿了一盒给4号寝室。或者：你把订单中所需要的所有盒饭一起拿到寝室楼下，然后再发放。相信很多人都会选择后者，因为效率快。
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
html代码有误？
这个我正在研究126的那个呢。
“a>p>”
文章里的，没有太大关系。呵呵…
你指的html有误是在哪里呢？我怎么没看到呢？