css sprites是什么，有什么优点？

css sprites又称css精灵图，是一种网页图片应用处理方式，是一种将多个图像组合成单个图像文件以在网站上使用的方法。其优点有：1、减少网页的http请求，提高页面的加载速度；2、减少图片的字节；3、减少了命名困扰；4、更换风格方便。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css sprite（雪碧图）

CSS Sprites是一种性能优化技术，是一种将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能；也被称为css 精灵图。

优点

a) 减少网页的http请求，提高页面的加载速度

b) 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和

c) 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率

d) 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便

缺点

a) 在图片合并的时候，需要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂

b) 背景设置时，需要得到每一个背景单元的精确位置

c) 维护合成图片时比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，最好只是往下加图片，而不要更改已有图片

为什么要使用Sprites（精灵图）？

网页通常包含多个图像。这些包括图标，按钮，徽标，相关图片和其他图形。当页面中加载图像时，浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器，这可能导致下载时间变慢以及带宽使用率过高。

CSS Sprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像，用户不下载多个文件，而是下载单个文件并通过偏移文件显示必要的图像（或精灵图）。

这样可以减少对服务器的调用、减少呈现网页所需的下载次数，节省带宽并缩短用户端的下载时间，减少网络拥塞。

如何使用CSS Sprites（精灵图）？

因为CSS Sprites是一张多个图像组合成单个图像，在精灵表中多个图像会被放置在网格状图案里，呈现网状分布。

当需要特定图像（精灵图）时，一般会通过CSS background-images属性引用精灵表，在通过CSS background-position属性对其进行偏移定位得到所需的精灵图，然后以像素为单位定义精灵图的大小。

（学习视频分享：css视频教程）