1.CSS精灵技术(精灵图)

1.1 为什么需要精灵图

请求次数减少,也可以更好的方式DDoS攻击和脚本注入攻击。
所以如何减少小图标或者图片的请求次数呢？只需要将其放在一整张大图片上即可。

这也解开了我一个疑惑，以前看原神的网页活动，很多图片都是集合在一张大的透明背景图上的，哦，所以这就是精灵图。

原神网页小游戏的精灵图：
不难看出都是一些背景的图片，所以精灵图也多用于背景图。

1.2 精灵图的使用

虽然知道了为什么别人的网页会有这种图片，但是我们如何精确的提取出其中的某个图片呢？就是如何使用精灵图。其实很简单，甚至还有点low。

我们需要使用到 background 和 background-position属性，其实就是先让整张大图作为背景，然后移动位置到想要露出来的图片而已，如图：

注意：网页中x、y坐标的方向，和传统数学上的不一样，不要弄错了。

除此，你还需要精确测量每个小图标的大小和与图片边界的距离，因为背景图片默认是贴着左上角的

这样会重复使用这个大图片，可能会导致内存增加，但是在这个内存不要钱的时代，考虑这种问题已经没有意义了，减轻服务器的压力显然比照顾内存重要多了。