Html 为什么以及如何将图像保存在一个图像中？

我注意到最近网站开始将图片保存在一个大的图片中。 比如google.com

我们在左边看到很多小图片。但实际上有一个形象：

这些图像是如何剪切和显示的？（firebug说它只是一个具有宽度和高度的元素，但X和Y的位置指向何处以及如何指向？）

---

感谢回复

使用css背景，图像被移动到正确的位置。图像的另一部分没有显示，因为以图像为背景的元素与想要的图片部分一样大

尝试更改背景部分css中的px值。你应该看到图像在移动

<span style="background-position:-20px -132px" class="micon"></span>

这里您可以看到用于此图像的背景位置

此技术称为。减少加载多个映像所需的http连接数。通常这是由设计师完成的。

这被称为“CSS精灵”

互联网上有很多关于这方面的信息。按随机顺序：

---

还有更多…

如何使用背景图像的非img元素-我理解。但是有一个元素（没有背景图像）我找不到。什么意思？给我一些提示：（firebug中google source的截图）看看这个标签的css

#logo img{border:0 none；left:0；position:absolute；top:-41px；}

是的，我明白了。。。我会读一些文章——想想——我会理解得更好。非常感谢。