雪碧图是什么，怎么用

您所在的位置：网站首页 › 雪碧图用法 › 雪碧图是什么，怎么用

雪碧图是什么，怎么用

2023-04-25 00:31| 来源: 网络整理| 查看: 265

什么是雪碧图

精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。

常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。

优点：

体积小：把N多个小图标放到一张大图上去，通过整合图片来减少图片的体积；请求次数少，打开速度更快：通过图片整合减少用户对服务器的请求次数，从而提高网站的优化速度。

使用 background属性例如：background: #ccc url('/icon.png') no-repeat 0 -200px

补充background相关属性 background-color: red (等于 background:red) background-image: url() 填充背景图片 background-repeat: no-repeat(不平铺)

前端如何制作合并精灵图（雪碧图）方法一：这是一个在线生成工具

http://alloyteam.github.io/gopng/###

方法二：npm命令生成 1.首先电脑上要安装有 node.js

打开终端输入下npm -v可以查看是否安装（注意空格）

LiudeMac-Pro:~ liu$ npm -v 6.14.13 //已安装会显示这个node的版本号

2.使用spirit-cli命令合并所有图片为一张精灵图并生成代码

①全局安装spirit-cli插件

// 使用npm npm install -g spirit-cli //报错的话，可以尝试前面加sudo,以管理员身份运行：sudo npm install -g spirit-cli

这里如果出现报错，

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules //没有读写权限 npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/node_modules npm ERR! errno -13 ··· npm ERR! Error: EACCES: permission denied,//拒绝授权 access '/usr/local/lib/node_modules' npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] { npm ERR! errno: -13,

报错显示没有权限，我们需要以管理员身份去运行，在前面加上sudo,如下图

sudo npm install -g spirit-cli

②使用命令 spirit 加上要合并的图片所在的文件夹路径 spirit + 空格+文件夹路径

// 使用npm → ~ lrachel$ spirit /Users/lrachel/Desktop/flag 开始检测路径： /Users/lrachel/Desktop/flag 检测到5个文件！开始进行合并

合并完成后，你会发现在你之前创建的img文件夹下多了一个spirit-cli文件夹，文件夹里面有合并好的精灵图(雪碧图)和对应的CSS，到这里只需要前端引入.css文件样式直接调用就可以。

image.png

举一反三

网页中用到.jif动图的时候，总是会出现锯齿，那么，我们也可以采用雪碧图的方式，让多张图片连续滚动，实现动画效果，相当于序列帧图。

知识点补充 npm -v 检查是否安装npm LiudeMac-Pro:~ liu$ cd desktop/文件夹名 //打开文件夹 LiudeMac-Pro:~ liu$ pwd // //全称“pathWord ” 查看当前打开的文件夹的完整路径 npm cache clean 缓存清理 sudo npm install npm -g //表示以管理员身份运行，或是node已随附npm安装，因此您应该拥有的版本npm，但是npm更新的频率比更新的频率高node，因此您需要确保它是最新版本。不是太确定

常见报错 sudo下的npm无法升级-sudo npm -v 与 npm -v版本号是不一样的

参考解决方案点击查看

什么是NPM NPM名词解释：

npm（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、用JavaScript编写的软件包管理系统。

NPM说明

npm会随着Node.js自动安装[3]。npm模块仓库提供了一个名为“registry”的查询服务，用户可通过本地的npm命令下载并安装指定模块。此外用户也可以通过npm把自己设计的模块分发到registry上面[4]。

NPM使用

npm可以管理本地项目的所需模块并自动维护依赖情况，也可以管理全局安装的JavaScript工具。

如果一个项目中存在package.json文件，那么用户可以直接使用npm install命令自动安装和维护当前项目所需的所有模块。在package.json文件中，开发者可以指定每个依赖项的版本范围，这样既可以保证模块自动更新，又不会因为所需模块功能大幅变化导致项目出现问题。

开发者也可以选择将模块固定在某个版本之上。

什么是Node.js

Node.js 是能够在服务器端运行 JavaScript的[开放源代码、跨平台"开放源代码")运行环境。

Node.js 采用Google开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。

Node.js 大部分基本模块都用 JavaScript 语言编写。

在 Node.js 出现之前，JavaScript 通常作为客户端程序设计语言使用，以JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。

Node.js 含有一系列内置模块，使得程序可以脱离 Apache HTTP Server 或 IIS，作为独立服务器运行。

【本文地址】

雪碧图是什么，怎么用

雪碧图是什么，怎么用

今日新闻

推荐新闻