CSS 精灵图的使用

前言

在浏览网页时，我们可能会发现，大多数的带图标的超链接，并非是如我们所想——用<a>包裹<img>来实现的，而是给<a>设置背景图。在这张背景图中，不光有当前超链接对应的图片，还有其他超链接的图片，它们共同组成了这张大的的背景图。这样的背景图我们称之为精灵图。

淘宝中带图标的超链接

图标超链接对应的精灵图

精灵图的使用

• 使用精灵图的原因

  使用精灵图可以减少向服务器请求图片的次数以及相应产生的资源。每次请求图片资源，都会花费一定的请求时间，这和图片大小无关，减少请求次数，即可减少总请求时间。此外，每次在传输数据时，都在数据前加上一些传输协议的头部，这和数据大小也无关。适当增加图片大小，可以减少传输次数，进而减少数据头所占据的资源。
  

• 精灵图的实现原理

    精灵图中有多个图标，如何在对应的超链接中展示对应的图标呢？
  

  我们可以认为，元素和它的背景图是相对独立的，元素只是展示背景图的一个窗口。我们可以移动背景图的位置，来使得我们需要的图片内容来到元素视窗的位置。

  我们为元素设置一张背景图，但从元素的视窗中只能看到海绵宝宝的半张脸。海绵宝宝为了能够展示它完整的脸庞，就需要相对与窗口进行移动。

  默认情况下元素与其背景图的位置关系