示例
在浏览网页时，我们经常会发现一些小图标，就像这样的：
而我们在浏览网页的时候，一个网站上经常会有十几个甚至几十个这样的小图标，像这样的：
这样的：
我们当然可以使用几十个 img 标签，然后指定每个图片的路径来找到图片，但是这样一来，我们将会浪费大量的时间在给图片取名字、写路径上，而且，一个网站同时加载这么多的img标签，势必会对网页的加载速度起到一定程度的影响，当网页上有上百的标签之后，这种影响会慢慢体现出来，影响了用户体验，那么，为了解决这个问题，我们应该怎么做呢？
查看源码
我们以QQ空间网页版的这个装扮小图标为例
去查看一下它的源码：
我们发现，它的这个小图标居然是用 i 标签来写的，看到这里，可能你要发问了，i 标签不是指定斜体的标签吗？
我们可以看到，这里的 i 标签中并没有实际内容，这只是一个空标签，这个标签出现的实际意义只是划分一个区域而已，你可能又要问了，划分区域不是应该用 div 标签或者 span 标签吗？为什么用这个？
众所周知，div标签是块级元素，一旦声明就要占走一行的空间，即使我们可以通过float或者display属性让它不占一行的空间，但是网页中有数十个小图标的时候，每个小图标都这样做的话，对于开发效率的影响简直是灾难性的，毕竟，没人想加班对吧
至于为什么不用 span 而用 i 标签，纯粹是因为。。。。。。i 标签比 span 标签省了三个字。。。
解决了 i 标签的问题，现在我们来看看这个 i 的样式：
我们发现，这个 i 标签只是单纯地加了一个背景图片而已，原来，我们的小图标效果就是通过给一个 i 标签的区域加背景图来实现的，我们再来看看这个背景图片的资源路径，我们右键点击这个路径，选择 “open in new tab” 打开这个资源，出现了如下场景：
这里可以看到这个网页上的所有小图标
实现原理
原来，网页上的所有小图标都指向同一个路径，也就是上面这个图片的路径，然后，我们给每个承载小图标的标签都声明了宽度和高度，再通过background-position这个属性，选择开始显示这张图片的坐标位置，如果承载这个小图标的标签空间不够，那么超出这个标签的图片则不会显示，原理图如下：
这就是用background-position来显示小图标的妙用