CSS Sprites
在网页的请求中，大部分的时间都消耗在HTML本身文档之外，例如图片、脚本、CSS等的下载。因此要提高WEB下来，减少HTTP的请求，可以从图片、CSS等方面来考虑。而减少HTTP请求将会大大提到WEB性能。下图是针对门户网站的时间消耗统计：
在HTML中，每一个img标记都将产生一次HTTP请求，因此我们可以通过减少图片请求来提高WEB性能。
下面将通过举例说明如何减少image的请求。
举例1：
对于a标签，我们通常会通过CSS来设置其背景图片及hover时变换用的背景图片。参考例子：http://css-tricks.com/examples/CSS-Sprites/Example1Before/default.htm
代码如下：
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)} …
效果如下：
然而我们可以将这些图片都整合成一张图片，通过设置背景图片的位置来定位需要显示的图片。参考实例：http://css-tricks.com/examples/CSS-Sprites/Example1After/default.htm
代码如下：
#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
效果如下：
另一个关于CSS Sprite的例子可以参考如下：
另外此网站上提供了CSS SPRITE的生成器，相见如下：http://spritegen.website-performance.org/
文章中提到的实例下载：
Example 1 Before
Example 1 After
Example 2 Before
Example 2 After
Photoshop Files
本文参考自:http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ ,仅次记录，以便学习。