前言
今天介绍的是进行web前端页面布局精灵图的使用,包括为什么使用精灵图？怎么使用？
一、精灵图是什么？
1.概念：
精灵图就是有许多很小的图标组成的一个大图，而一个个小图是我们需要用到的。
例如图片中的ABCD…
2.图片示例：
二、为什么使用精灵图？
1.用户体验而言：
在用户使用网页时，首先页面越华丽速度越快越好,如果使用一系列的小图标, 不将所有的小图片全放在一张图片上,页面一旦卡顿,那么只会展示出一部分图 标,会使页面看起来很乱,使用精灵图就是将一部分图标绑定在一起页面卡顿时 页面上什么也没有,一旦有,所有的图画都有,这样就使得页面很整洁。
2.就开发者而言：
开发者将来不会只进行一个网站的开发与维护,可能会开发许多网站,使用多个 网页的图片,但是开发环境（也就是电脑只有一个）,将图片分文件夹进行存放 也会容易搞乱图片的位置,每一块大盒子使用一个精灵图,或者某一功能使用同 一个精灵图，会极大地提高开发体验。
3.就服务器而言：
许多小图标的传输,需要服务器与浏览器交互很多次,即影响用户体验又不安全 这个大图的存在使得浏览器与服务器交互的次数大大缩减（减轻服务器的压力）
三、怎样使用精灵图
1.background-position
这个属性以前讲背景的时候提到过,作用是改变背景图的位置, 现在使用精灵图也是使用这个属性,通过修改这个属性达 到改变精灵图的位置,从而使大图上的小图展示在人的眼前。
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav, .qwe, .qwe1 { float: left; width: 116px; height: 109px; background: url(../../下载.jpg) no-repeat; } .nav { background-position: -480px -558px; } .qwe { background-position: -252px -420px; } .qwe1 { background-position: -98px -143px; } </style> </head> <body> <div class="nav"></div> <div class="qwe"></div> <div class="qwe1"></div> </body> </html>
效果展示：
2.测量精灵图偏移的方法
最朴素的方法： 在文件资源管理器中右键单击精灵图,点击编辑，在画图软件中点 击左上角的查看。先看你盒子的大小,精灵图的左上角（下标为0,0） 会与你的盒子左上角对齐,所以先找到你要展示的小图然后将鼠标 放在小图的左上角,观察图示中左下角的坐标，将其变成负的填入1 中介绍的属性即可。
其他方法：
网络上有一系列的p图软件也可以进行测量,由于博主不喜欢p图,所以就不进行细细的描述了 推荐TIM自带的截图功能进行测量,也可以使用ps软件进行测量。
总结
精灵图的使用,既方便了开发者,也提高了使用者的使用体验。是一个非常棒的发明,博文中使用的图片源于网络，侵权立删。
