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

Question

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

以 google.com 图片文件为例：

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

Answer 1

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

代码如下：

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