CSS Sprites: CSS图片合并技术详解

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图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。