图像映射和 CSS 精灵的区别

Question

我找不到图像映射和CSS精灵之间的明显区别。它们都看起来像将页面中的图像合并成一个？因此，我们可以减少向服务器发送的多个请求。那么真正的区别是什么？

- Stranger

Answer 1

图像映射：

在网页中，单个图像可以拥有不同的可点击区域，每个区域可以产生不同的效果（例如启动不同的链接）。

这里有一个描述：http://www.javascriptkit.com/howto/imagemap.shtml

CSS 精灵：

将多个 CSS 类背后的图像合并到单个文件中以提高性能，例如减少请求的数量和通常的下载大小。

例如，您可以将颜色框对话框的各种边框元素合并为单个图像，或将按钮的已单击和未单击的图像合并。

我发现的关于 CSS 精灵最好的描述是这个：http://css-tricks.com/css-sprites/

- Jon Egerton

Answer 2

一个图像映射是一张图片，你可以将其转换为图像映射，并在图片上放置多个链接。

CSS精灵是由多个图像组成的一张图片，您可以使用CSS背景定位来显示它，从而减少HTTP请求。

- Billy Moat

Answer 3

我知道这个问题已经被问了一年，让我试着用自己的话来解释一下。

CSS Sprite 就像一个单文件图像库，您可以通过 CSS 提取其中任何部分，并将它们单独放置在网页房地产的任意区域中，而图像映射（to-url）则是一个可点击区域映射到目标 URL 的图像，正如其名称所示。

- user1102967

Answer 4

一个图像映射是指在图像上定义坐标，以便对这些区域上的事件作出反应。

CSS精灵是将两个或多个图像合并成一张图像。

- Sven Bieder