CSS精灵图(sprite)技术 减少网页背景图片请求次数

我们知道，网页中的每一张图片，都是一个请求，这些请求会占据一定的服务器带宽，当这些请求很多的时候，就会造成服务器带宽被占满，或者图片显示很慢，用户体验极差。

这时候就需要精灵图(sprite)来解决了，精灵图就是将网页中所有用到的背景图片以及图标浓缩到一张图上，这就显著的减少了图片和图标的请求，只请求一次就可以用所有背景图标。

典型例子

相信大家都会玩王者荣耀，王者荣耀的官网就使用了精灵图，通过审查元素可以查找到这张精灵图。

上面的精灵图中包含了用到的所有图标和按钮背景图片。

使用方法

使用精灵图必须熟练掌握背景定位background-position，以及精确的测量，以精灵图左上角为基点，向下为y轴，向右为x轴，精确测量所选的图标宽高，以及所选图标距离基点的y轴和x轴距离。

下面我以下载游戏这个背景图为例，将精灵图拖入ps中，使用矩形选框工具，放大到像素点框选，然后在属性的变换中可以精确的看到下载游戏的宽高及轴距离。

得到这些数据之后就可以开始背景定位了，我这里以div为例。

上面是一个div，使用了精灵图，通过定位找到下载游戏这个背景，具体的代码你可以审查元素(因为csdn的限制，不能自定义写html代码，具体的代码可以到我的个人博客中看)。

核心总结

精确测量每个小背景图片的大小和位置
给盒子指定小背景图片时，背景定位基本都是负值

注意事项

精灵图只适合背景图片很多的站点，如果是小公司，背景图片不是很多不建议使用，维护成本很高。
原文地址：https://www.xiaorenjc.net/program/front/css/1395