CSS-sprites，又叫精灵图

欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~

1 概念

CSS-sprites，又叫精灵图，也是CSS图像拼合或者CSS贴图定位

2 CSS-sprites拼合

选择合适的图像素材去拼合到一张图片上，再、利用定位将图像在网页中渲染出来

1. 一般小素材或者icon类素材或者比较少改动的图片适合拼合为CSS sprites
2. 一般大图像或者网页背景不适合拼合为CSS sprites，网络带宽不好的情况下，访问大图的拼合图像，加载时间需要更长
3. 推荐：一般最好将尺寸大小差不多的品何在一张图片上，这样也会有利于开发者计算定位，降低出错率，提高效率

3 CSS-sprites优点和缺点

优点：

1. 将众多小图像拼合，一次性加载，减少http请求，提高网站性能
2. 减少图片文件数量，减少命名太多的困扰，对开发者友好，降低出错率，提高效率

缺点：

1. 在做图片拼合的时候，需要在页面中留有合适的空间，需要精确测量计算位置，会很繁琐，当然现在也有对应的自动拼合且产生定位代码的软件
2. 不利于维护，当CSS-sprites上的一个图像需要改动时，往往需要改动其他的图像的CSS代码，这就要在制作CSS sprites的时候就要考虑这种图片以后改动会不会很频繁，如果很频繁，可以不放在拼合图像中

4 CSS-sprites例子

CSS-sprites

    
    



    
付款图标
    
删除图标
    
存款图标
    
粘贴图标
    
笑脸图标
    
编辑图标

然后快去看看执行结果吧：

result