图片地图和 CSS 精灵图

原创已于 2025-02-13 10:40:54 修改 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

于 2020-11-16 10:14:50 首次发布

CSS 专栏收录该内容

19 篇文章

订阅专栏

CSS精灵技术是一种优化网页性能的方法，通过合并多个小图标为一张大图，利用background-position属性显示所需图标。这种方法减少HTTP请求，提高页面加载速度。然而，它也有不便之处，如不便测量和后期修改。前端开发者需要知道每个图标在精灵图中的位置和大小，通过CSS设置显示。例如，要显示金钱图标，可以设置width、height和background-position属性。

图片地图：

图片地图允许在一个图片上关联多个 URL，目标 URL 的选择取决于用户单击了图片上的哪个位置。

图片地图有两种类型：

服务器端图片地图：将所有点击提交到同一个目标 URL，向其传递用户单击的 x、y 坐标。
客户端图片地图：通过 HTML 的 <map> 标签来实现。<map> 标签被用于定义客户端图片地图，即一个具有可点击区域的图片。<map> 标签只是一个容器，其中包含一组 <area> 标签，正是这些 <area> 标签定义了图片地图里的可点击区域。name 属性是 <map> 标签的必选属性，用于定义图片地图的名称，通过将 <map>的 name 赋值给 <img> 的 usemap 属性，以在二者之间建立起联系。
```
<img src="planets.jpg" usemap="#planetmap" alt="Planets" />

 
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
```
点击上面例子中的图片不同的指定区域，将会跳转到不同的链接。

CSS 精灵图/ CSS 雪碧图：

将多个小图标合并制作到一张图片上，使用 background-position 属性单独显示其中一个，这样的技术叫做 CSS 精灵技术，也叫做 CSS 雪碧图。

CSS 精灵的优点是：可以减少 HTTP 请求数，加快网页显示速度。缺点是：不方便测量，后期改动麻烦。

精灵图片是 UI 设计师给的，不需要前端自己生成。
前端需要去获取到想要显示的小图标的宽高和位置，然后使用 width、height、 background-position 属性去设置即可显示。

请添加图片描述

// 如上一张精灵图片，假设只想要显示钱那张小图标
// 通过设计软件获取到钱那张小图标的宽是 34px，高是 32px，位于整张图片上的水平位置是 66px，垂直位置是 488px
.money {
	width: 34px;
	height: 32px;
	background-image: url(sprites.png);
	background-position: -66px -488px;
}

<div class="money"></div>

请添加图片描述