css - 一个图像文件中的多个图像

Question

我是 CSS 网页设计的新手。我发现一些网站在一个图像文件中组合了多个图像。这是来自亚马逊的一个例子：

http://g-ecx.images-amazon.com/images/G/01/x-locale/personalization/amznlike/amznlike_sprite_02._V196113939_.gif

我真的很想知道如何以最好的方式做到这一点。是否有任何工具可以组合图像并获取每个图像的像素位置以将它们放入 CSS 中？

Answer 1

它们被称为 CSS Sprites。你可以google很多信息。大多数网站都使用这种技术来减少加载时间。您基本上要做的是在要加载图像的所有元素中加载一张图像。

但是您将它们加载为背景图像，从而使您能够修改它们的位置。因此可以显示相同图像的不同版本。

我不想告诉一切，所以这里有一个让你开始的进一步阅读。