如何使用单个图像文件在网站中显示图像/图标

Question

我注意到网站只使用单个图片png文件来保存网站使用的所有图标和图像。但是当您检查特定图像时，您看不到其他图像。

例如google.com图片文件示例：

如何将此图像剪切并拼接成该网页可用的单个图像？

Answer 1

图像分为“精灵”。 这里有一个例子http://www.spritecow.com/。

代码是这样的：

.sprite {
    background: url('imgs/example.png') no-repeat -433px -51px;
    width: 33px;
    height: 33px;
}