CSS 精灵图是使用多个小图片组成一张大图片的技术。使用 css-sprite npm 包可以方便的实现 CSS 精灵图。本文将介绍如何使用 css-sprite，在项目中实现 CSS 精灵图。
安装 css-sprite
使用 npm 安装 css-sprite：
npm install css-sprite --save-dev
创建图片合并器
合并图片并生成 CSS 的步骤需要指定一些配置项，我们可以先创建一个图片合并器（sprite.js）来完成这个工作：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------
-------------- - -------- ------------- ----------- -
----- ------------ - ----------------------- -- --------------------------- ----------
------ --- ----------------- ------- -- -
----- ------ - --- --------------
-- ----
------------------------- ----- -- -
-- ----- -
------------
-
-- ----
----- ---------- - ---------------
------- ------
-------- --
---
----- ------- - --------------------------- ------------
-- ----
------------------------------------ ----------- - --------- -------- ---
-----------------
---
---
--此处的 sprite.js 接收两个参数，第一个参数为图片路径列表，第二个参数为输出图片的路径。该合并器是基于 Spritesmith 实现的，并在输出时使用 fs 模块将图片二进制数据写入到本地文件。
使用图片合并器
在项目中使用图片合并器非常简单，只需调用该合并器并指定需要合并的图片路径即可。如下所示，将多张图片合并成一张精灵图：
-- -------------------- ---- ------- ----- ------ - -------------------- -------- ------------------- ------------------- ------------------- -- ------------------------------------------- -- - ------------------- -- ------- -- ---------------- -------------- -- - ------------------- -------- ------- -- ----------- ---
使用该脚本执行后，会在 dist/images/ 目录下生成 sprite.png，该图片就是我们所需的 CSS 精灵图。
生成 CSS 代码
接下来，我们需要生成精灵图对应的 CSS 代码。使用 css-sprite 生成 CSS 代码非常方便，只需调用其官方提供的样式生成器即可：
-- -------------------- ---- -------
----- --- - -------------------------------
------------
---- -
-------------------------
--
----------- -------------------------
--------------- ----------------------
------- -----------
---------- ----
-- ----- ------- -- -
-- ----- -
---------------- ------ -------- ------- -- -----------
-
---------------- ------ -- ------- -- -----------------
---使用该脚本执行后，会在 dist/css/ 目录下生成 sprite.css 文件，其中包含了精灵图每个小图标对应的 CSS 样式。
引入精灵图并使用 CSS 样式
在 HTML 中引入精灵图的方式和引入普通图片一样，只需在图片的 src 属性中指定路径即可：
<img src="dist/images/sprite.png" alt="sprite" width="200" height="200">
在 CSS 中使用精灵图的样式为：
-- -------------------- ---- ------- ------ - ----------- --------------------------- ---------- -------------------- - -- ------ ------ ------- ------ - ------ - ----------- --------------------------- ---------- -------------------- ------ -- ------ ------ ------- ------ - ------ - ----------- --------------------------- ---------- -------------------- ------ -- ------ ------ ------- ------ -
在 HTML 中使用 CSS 样式的方式和其他样式一样，只需在元素的 class 属性中指定样式名称即可：
<i class="icon1"></i> <i class="icon2"></i> <i class="icon3"></i>
总结
在本文中，我们介绍了如何使用 css-sprite npm 包来生成 CSS 精灵图。通过上述脚本，我们可以将多个小图片合并成一张大图片，并使用 css-sprite 提供的样式生成器生成 CSS 样式。使用 CSS 样式集成的精灵图可以极大地优化页面加载速度和性能表现，是前端开发中不可或缺的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73086