No.006 雪碧图CSS Sprite

最新推荐文章于 2022-09-10 11:12:21 发布
最新推荐文章于 2022-09-10 11:12:21 发布
阅读量352 收藏
点赞数
文章标签： 前端 雪碧图 精灵图 CSS Sprite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36653473/article/details/88854332
版权
本文介绍雪碧图（CSS Sprite）的由来、使用目的及注意事项。雪碧图能有效减少HTTP请求，提升网页加载速度。文章还介绍了如何合理布局雪碧图及利用CSS属性展示所需图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

雪碧图CSS Sprite

（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）

1. 名称由来

为什么叫雪碧图呢？因为常喝的雪碧的英文名称就是Sprite，所以中文就叫雪碧图了。
雪碧
（吐槽：当然你还能把Sprite叫成精灵图）

2. 使用目的

网站开发中，经常会使用到许多的小图标，但如果每个小图标都作为一张图片的话，就意味着每个小图标的显示都要产生一个HTTP请求。

所以为了减少请求次数，防止访问速度变慢，就将网页显示需要的小图标都放在一张图片上，就形成了雪碧图。

就像下面这样：
雪碧图示例

3. 实现注意

组成雪碧图时，需要根据小图标的大小合理安排布局，不然等到用的时候就是和自己过不去了。

使用雪碧图时，用weight和height设置显示框的大小，然后在雪碧图上用background-position控制，移动到要显示的小图标上。
雪碧图布局
（用的时候就知道布局的重要了，比起一次次量像素长度，还是根据单元格长算比较轻松啊）

TKeyI
关注
CSS Sprite雪碧图详解
得意小门生的博客
08-19 617
CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 雪碧图的使用场景 静态图片，不随用户信息的变化而变化。 小图片，容量比较小（2~3k）。 图片加载量比较大。 目的 减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。 使用 使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。 ![![在这里插入图片描述](ht.
移动端Rem布局--雪碧图css sprite
hahahhahahahha123456的博客
11-29 896
为什么使用雪碧图 [摘要] CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式，今天为大家分享一个一键生成css雪碧图片的工具，复杂的事情简单化，提高开发效率。 CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。这样的话，当页面渲染...
精灵图为什么叫雪碧图（精灵图的历史）
qq_45272642的博客
10-10 2932
精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图[1]。 常见碳酸饮料雪碧的英文名也是Sprite，因此也有人会使用雪碧图的非正式译名。 历史 精灵图源于1974年左右街机的兴起，其中的只读存储器使得精灵图被广泛使用。Taito当时发售了最早使用精灵图的电子游戏。 二十世纪七十年代中期，Signetics设计出第一款支持生成精灵图形的视频/图形处理器。 1977年发售的Atari 2600以其硬件精.
精灵图/雪碧图介绍
weixin_43368552的博客
06-13 2575
为啥精灵图又叫雪碧图？精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图[1]。常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名场景：项目中将多张小图片，合并为一张大图片，这张大图片就是精灵图 优点：减少服务器接收发送次数，减轻服务器的压力，提高页面加载速度。 例如把八张小图片的请求变成一张图片的请求，减少请求，减轻带宽，减少服务器压力 精灵图的使用： 1.创建一个盒子，设置盒子大
关于雪碧图
蜗牛先生
08-24 6584
前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？   注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。   ▍含义 也叫CSS sprites精灵图，通俗来说就是有很多小图标合成的一张大的图片就做雪碧图。   ▍为什么要用雪碧图 在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，当图片过多的时候会使得加载量...
什么叫 “雪碧图”？
fe_watermelon的博客
09-10 1861
大家好，我是前端西瓜哥。今天来随意聊聊雪碧图。
CSS3 帧动画（Sprite，直译叫雪碧图）
司马懿的西山居
02-22 1万+
CSS雪碧CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。原理CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你
css-sprite使用详解
09-25
首先，你需要安装`css-sprite`工具，这是一个用于自动化生成雪碧图和对应的CSS样式的库。在命令行中，你可以通过npm（Node.js包管理器）进行安装： ```bash npm install css-sprite ``` 如果你的项目使用Gulp作为...
详解CSS Sprite雪碧图的应用
09-22
background: url('css-sprite.jpg') no-repeat; margin: 8px 0px; } ``` 然后为每个具体的图标设置不同的background-position值： ```css .sidebar li.icon2 { background-position: 0px -24px; } .sidebar li....
CssSprite.zip
08-17
CSS Sprite，又称为CSS雪碧图或CSS精灵，是一种常见的网页图像优化技术。在网页设计中，为了减少HTTP请求的数量，提高页面加载速度，设计师们通常会将多个小图像合并成一张大图，然后通过CSS定位来显示所需的图像...
什么是雪碧图，怎么用？
初漾的博客
05-10 6132
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，该图片使用CSS background和background-position属性渲染。  优点：加载网页图片时，减少服务器的请求次数，提高页面的加载速度。  缺点：耗费内存，影响浏览器的缩放功能，拼图维护比较麻烦，使
background-position和雪碧图(CSS Sprites)用法
bingkingboy的博客
04-04 5万+
background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性，这次就总结下它的用法。       还是那句话，工欲善其事必先利其器，只
使用vue做一个雪碧图组件
choucha5981的博客
09-07 1151
1.什么是雪碧图： 雪碧图就是将很多很多的小图标放在一张图片上，就称之为雪碧图。 2.使用雪碧图的优缺点： 优点：a.减少http请求次数 b.减少图片大小，提升网页加载速度 (多张图片加载速度小于拼合成的图片的 加载速度)； ...
CSS Sprite雪碧图
CamilleZJ的博客
05-22 8062
什么是雪碧图？雪碧图也叫CSS精灵， 是一种CSS图像合成技术；通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。如下：如上雪碧图，background-position使用定位如下X和Y轴，注：原点0，0 位置， 之后X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标为什么应用雪碧图？网站开发90%会用...
sprite（雪碧图，也叫精灵图）
weixin_45704506的博客
09-23 1932
1、css sprite 中文名为 雪碧图，也叫精灵图，是基于background-image和background-position 实现的显示技术 就是将一个有很多图标的图片，通过控制图片显示位置来达到自己想要的图 这张图片是下面代码中用到的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
关于CSS雪碧图
m0_54067601的博客
01-04 656
关于CSS雪碧图 CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。写一些CSS雪碧的简单应用和小技巧。 想法 关于雪碧图的在应用的时候，其实没有遇到什么乱七八糟的问题，感觉还行。唯一有问题的就是关于图片定位正负的问题（可能是因为我学的比较浅吧）。整理一下，以便后续复习。 关于定位的正负（定位） 我搞到了一张图，还挺好用的。借来参考下。 关于正负，其实无论是定位还是，雪碧图，之前
CSS 雪碧图及其优缺点
薛小科的博客
07-01 639
CSS Sprites简介：国内叫雪碧图或者雪碧精灵。它允许将网页中多个零星小图都包含到一张大图中去，减少每个图的 HTTP 请求来提高图片加载效率，通过 background-image、background-position、background-repeat 来对图片定位。 优点： 通过将多张图片合并成一张，可以有效减少 HTTP 请求，提高页面加载的性能（主要原因） 合成后的图片总大小小...
雪碧图／精灵图使用教程（CSS Sprites）
李静静
10-20 2万+
雪碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图 一、使用雪碧图的优点有以下几点： 将多张图片合并到一张图片中，可以减小图片的总大小。 将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。 使用步骤：（首先理解下sprites图其实就是将一大块图用来做背景图，与普通背景图不同的是：只在某固定位置显示某部分图） 找到页面上固定的图片（不会动态发...
教你来使用雪碧图（CSS sprite）
热门推荐
Allenyhy的博客
08-07 6万+
什么是雪碧图？ 雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。 使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值