CSS实现多个图标集合到一张图片

最近在整理资料，首先想起的就是这个图标多合一。

当初在仿做华为商城时，发现有张图片集合了页面上部分图标，才发现图标可以这样操作。

首先是原图，

实现效果，

CSS代码，以第二个为例：

label{
    display: inline-block;
    width: 47px;
    height: 47px;
    background: url(../img/icon.png) -94px -151px no-repeat;
}

实现思路：

1. 首先定义外框尺寸，
2. 然后给它设置背景图片——background-image：url(../img/icon.png);
3. 接着通过像素定位——background-position: -94px -151px;
4. 最后设置背景图像不重复——background-repeat: no-repeat;

简写为：background: url(../img/icon.png) -94px -151px no-repeat;

这就实现图标多合一，很简单。