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

Question

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

我们在左侧看到很多小图片。但真的是一个形象：

如何剪切和显示这些图像？ （萤火虫说它只是宽度和高度的元素，但是X和Y位置指向的位置以及如何？）

感谢您的回复

Answer 1

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

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

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

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

Answer 2

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

Answer 3

这称为“ CSS Sprites ”。

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

• Smashing Magazine

• CSS Tricks

• A List Apart

还有更多......