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

Question

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

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

如何将此图片剪切并拼接成可供该网页使用的单独图片？

Answer 1

图像分为"sprites"。 这里有一个例子 http://www.spritecow.com/.

代码如下：

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