CSS Sprites是最初的时候被直译为“CSS小鬼”、“CSS妖精”，后来慢慢的被意译为“CSS图片合并”、“图像拼合”等，个人觉得CSS图片合并 比较贴切CSS Sprites并不是一门新技术，而只是一种高级CSS技巧，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。

要学习和使用CSS Sprites并不难，需要的是耐心。如果你有这个耐心，就好好看看本文对CSS图片合并技术 的详解.

什么是CSS Sprites？

2000年开始，Web设计 向着精致、巧妙的方向发展。设计师们开始考虑使用非javascript 的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprites应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

2004年，Dave Shea 提出了一种使用CSS控制组合图片的方案 ，将许过小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。

当页面加载时，不是加载每个但以图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites用在哪里？

CSS图片合并可以用在很多场合，大字那个网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空 白，使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目 的方式。

下面是一些CSS Sprites的使用范例：

Apple
苹果网站使用CSS图片合并来制作导航菜单的鼠标悬停效果：

Google
Google使用了极其简化的方案：

CSS图片合并常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标 、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版 http://www.liquidroc.name/post/my_view_on_css_sprites.html

最权威的CSS Sprites介绍文章之一

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一片图文并茂的介绍文章

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites
介绍Yahoo、AOL等网站使用CSS图片合并降低服务器压力的案例。

What Are CSS Sprites?
又一片介绍文章

Sprite Optimization
Dave Shea的思考：是不是真的有必要简历复杂的大型CSS图片合并？答案是不！不要搞得太复杂，找到一个折中的方案才是正道。

?

Creating Easy and Useful CSS Sprites

一篇CSS图片合并教程，其源文件可下载学习

Fast Rollovers Without Preload

一个快速翻转效果的例子

CSS Sprites + Rounded corners

另一个例子：使用CSS Sprites实现背景圆角

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程，介绍了CSS Sprites的原理和应用方法。

Animated GIF For CSS Sprites

一个比较特别的应用

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

Advanced CSS Menu

还是悬停效果

Creating and Using CSS Sprites

一个非常基本的教程

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念，并演示了如何在网页中使用它，长度：10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程，展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez 展示了 CSS Sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS Sprites的范例，他将8幅图片组合在了一起，并且使用jquery 制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站，减少图片请求数量可以减轻服务器负担，这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites，你可以对一个对象的一小部分加载翻转效果，使用负值的背景图片位置( bac