向导地图技术一、为什么需要向导地图技术二、向导地图使用三、案例
一、为什么需要向导地图技术
许多小背景图像经常作为润饰应用于一个网页，如果网页图像过多，服务器会频繁发送和接收请求图像，导致服务器请求压力大，页面加载速度大大降低。
因此，为了有效地减少服务器发送和接收请求的次数并提高页面读取速度，CSS精灵技术(也称为CSS精灵、CSS精灵)。
核心原理：通过将网页中的小背景图像合并为一张大图，只需一次请求即可完成服务。
二、使用向导地图向导地图的核心：
向导技术主要用于背景图像。 就是把多个小背景图像合并成一个大图像。 此大图像(也称为sprite sprite或sprite )移动背景图像的位置。 在这种情况下，可以使用背景位置。 移动距离是此目标图像的x和y坐标。 请注意页面的坐标不同。 (请注意网页的坐标。 x轴向右为正值，向左为负值。 y轴也一样。 )通常向上左移，因此数值为负值。 使用向导地图时，必须准确测量每个小背景图像的大小和位置。 三、案例下图为妖精的照片，根据妖精的技术，找到了a这个单词。
个案研究：
首先，需要得到向导地图中字符位置的大小和坐标。 然后，根据其大小在页面上构建同样大小的箱子，用background属性向箱子添加背景。 也就是说，将此完整向导地图作为箱子的背景，然后根据background-position属性中获得的相关字符的坐标进行移动。 请注意，由于常规向导映射将左上角的位置作为默认值移动，因此取值通常为负，最终达到预期的效果。
代码如下。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' width: 110px； height: 118px； border : 1px固态# CCC； 背景定位：-493 px-276 px； ackground:URL(./ABCD.jpg ) no-repeat；/*背景色：蓝色violet； //style/headbodyspanclass=' a '/span/body/html的结果如下：