css 精灵图-css中的精灵图像是什么？

CSS Sprite即CSS Sprite，又称CSS精灵，又称为“CSS图像马赛克”、“CSS纹理定位”或“CSS图像精灵”css 精灵图，是一种网页图像应用处理方法。

其实就是将一个页面涉及到的零星图片全部包含到一张大图片中css 精灵图，这样当访问该页面时，加载的图片就不会像以前那样一张一张地逐渐显示出来。

CSS Sprite的基本原理就是将你网站上使用的一些图片整合成一张图片，从而减少你网站的HTTP请求数量。

图像是使用CSS的background和background-position属性来渲染的，这意味着你的标签看起来更复杂，并且图像是在CSS中定义的，而不是

标签。

当需要图片时，现阶段利用CSS属性background-image结合background-repeat、background-position等来实现图片的显示。

使用 Sprite 贴图的优点

1.减少加载网页图片时对服务器的请求次数

可以合并很多背景图片和小图标，方便在任何位置使用，使不同位置的请求只需要调用一张图片，从而减少对服务器的请求次数，减轻服务器的压力，并且同时提高页面的加载速度，节省服务器流量。

2.提高页面加载速度

sprite技术的用途之一是图像的加载时间（以及当有很多sprite时单个图像的加载时间）。 由所需图像组装而成的 GIF 图像的尺寸将明显大于拼接在一起之前的所有图像的尺寸。

单个 GIF 只有一个与其关联的颜色表，而每个分段 GIF 都有自己的颜色表，这会减小整体大小。 因此，单个 JPEG 或 PNG 精灵的尺寸可能小于将图像分割为多个图像所获得的总图像尺寸。

3.减少键盘盗刷的一些bug

当键盘滑过时，IE6不会主动在a:hover中预加载背景图片，所以如果使用多张图片，鼠标滑过会闪白光。 使用CSS Sprite，就不会出现这种现象，因为一张图片就够了。