一文搞懂css中精灵图如何使用

• 3.就服务器而言：

• 三、怎样使用精灵图

• • 1.background-position
• • 代码示例：

• 效果展示：

• 2.测量精灵图偏移的方法

• • 最朴素的方法：

• 其他方法：

• 总结

---

前言

====================================================================

今天介绍的是进行web前端页面布局精灵图的使用,包括为什么使用精灵图？怎么使用？

---

一、精灵图是什么？

===========================================================================

1.概念：

---

精灵图就是有许多很小的图标组成的一个大图，而一个个小图是我们需要用到的。

例如图片中的ABCD…

2.图片示例：

---

二、为什么使用精灵图？

=============================================================================

1.用户体验而言：

---

在用户使用网页时，首先页面越华丽速度越快越好,如果使用一系列的小图标,

不将所有的小图片全放在一张图片上,页面一旦卡顿,那么只会展示出一部分图

标,会使页面看起来很乱,使用精灵图就是将一部分图标绑定在一起页面卡顿时

页面上什么也没有,一旦有,所有的图画都有,这样就使得页面很整洁。

2.就开发者而言：

---

开发者将来不会只进行一个网站的开发与维护,可能会开发许多网站,使用多个

网页的图片,但是开发环境（也就是电脑只有一个）,将图片分文件夹进行存放

也会容易搞乱图片的位置,每一块大盒子使用一个精灵图,或者某一功能使用同

一个精灵图，会极大地提高开发体验。

3.就服务器而言：

---

许多小图标的传输,需要服务器与浏览器交互很多次,即影响用户体验又不安全

这个大图的存在使得浏览器与服务器交互的次数大大缩减（减轻服务器的压力）

三、怎样使用精灵图

===========================================================================

1.background-position

---

这个属性以前讲背景的时候提到过,作用是改变背景图的位置,

现在使用精灵图也是使用这个属性,通过修改这个属性达

到改变精灵图的位置,从而使大图上的小图展示在人的眼前。

代码示例：