IMAGE MAPS 和 CSS SPRITES 的区别

Posted 2023-05-08

【中文标题】IMAGE MAPS 和 CSS SPRITES 的区别

【英文标题】：Difference between IMAGE MAPS and CSS SPRITES

【发布时间】：2012-09-06 14:27:03

【问题描述】：

我找不到 IMAGE MAPS 和 CSS SPRITES 之间的明显区别。两者看起来都像是将页面中的图像合二为一？所以我们可以减少对服务器的多次请求。那么真正的区别是什么？

【参考方案1】：

图像映射：

页面中的单个图像，您可以单击不同的区域，然后产生不同的效果（例如启动不同的链接）。

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

CSS 精灵：

将多个 css 类背后的图像组合到一个文件中以提高性能 - 例如减少请求数量并通常减少整体下载大小。

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

我发现的关于 CSS sprite 的最佳描述是：http://css-tricks.com/css-sprites/

【参考方案2】：

图像地图是一张图像，您可以将其转换为图像地图并在图像顶部放置多个链接。

CSS sprite 是由多个图像组成的图像，您可以使用 CSS 背景定位来显示这种减少的 http 请求。

【参考方案3】：

图像地图是位于图像上的坐标的定义，以便能够对该区域上的事件做出反应。

一个 css sprite 是两个或多个图像联合在一个图像中。

【参考方案4】：

我知道它是在一年前被问到的，让我试着用我自己的话来解释一下。

CSS Sprite 就像一个单一的文件图像存储库，您可以通过 css 提取其中的任何部分并将它们单独放置在网页空间的任意区域中，而图像映射 (to-url) 顾名思义是具有映射到目标网址的可点击区域的图像。