什么是精灵图？如何使用精灵图

精灵图可以叫雪碧图也叫css sprites

一. 精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图上，不同位置的图片，进而，在引入一张图的前提下，显示不同的图片的技巧。它适合：一般小图标素材。

二.优缺点

优势：
加快网页加载速度
浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染
后期维护简单
该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用
缺点：
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

那么如何使用呢，今天我就来教大家。

首先用div建立几个盒子来存放精灵图（记住精灵图是重复使用的）如下：

html代码：

<div style="display: flex; flex-direction: row;"><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div><div class="f"></div></div>

css代码：

.a,.b,.c,.d,.e,.f{width: 85px;height: 100px;background: burlywood;background-image: url('@/assets/精灵图.png');margin-left: 20px;
}
.a {background-position: -25px -80px;
}
.b {background-position: -115px -80px;
}
.c {background-position: -205px -80px;
}
.d {background-position: -25px -180px;
}
.e {background-position: -115px -180px;
}
.f {background-position: -205px -180px;
}

那么来看看完整的效果图吧！

用到的精灵图如下：
总结：通过css定位图片位置使多个div来显示对应的图片，页面显示时，只加载一张图片，从而加快渲染速度，也是css优化的一个点。

什么是精灵图？如何使用精灵图相关推荐

西门子精彩屏+精简屏+精智屏设置屏保功能的具体方法和步骤
精彩屏+精简屏+精智屏设置屏保功能的具体方法和步骤精彩Smart屏设置屏保: Smart屏支持屏保功能,但是不能自定义屏保,只能使用屏中自带的屏保,并且仅可置屏保等待时间.设置步骤如下: 1.从触摸 ...
国内首个L3级自动驾驶之城诞生，高精定位和高精地图成为关键支撑
近日,随着<深圳经济特区智能网联汽车管理条例>正式实施,深圳已允许完全自动驾驶汽车合法上路,深圳也成为国内首个L3级自动驾驶之城.作为自动驾驶重要的感知传感器,高精地图和高精定位是L3级自 ...
精琢机器人_精琢六十年三菱电机半导体新品为你而来
[原创]精琢六十年三菱电机半导体新品为你而来文章来源自:高工机器人网 2018-06-29 09:36:51 阅读:7986 摘要近几年,三菱电机以改善生产效率.提供高品质产品以及满足环境发展需要 ...
java虚拟机精讲_Java虚拟机精讲 (高翔龙著) 带书签目录中文PDF扫描版[63MB]
<Java虚拟机精讲>内容简介:HotSpot VM是目前市面上高性能JVM的代表作之一,它采用解释器+JIT 编译器的混合执行引擎,使得Java 程序的执行性能从此有了质的飞跃.本书以极 ...
java语言程序设计精编_全国精编月高等教育自学考试Java语言程序设计一试题
<全国精编月高等教育自学考试Java语言程序设计一试题>由会员分享,可在线阅读,更多相关<全国精编月高等教育自学考试Java语言程序设计一试题(12页珍藏版)>请在人人文库网上 ...
mysql精讲_Mysql 索引精讲
开门见山,直接上图,下面的思维导图即是现在要讲的内容,可以先有个印象- 常见索引类型(实现层面) 索引种类(应用层面) 聚簇索引与非聚簇索引覆盖索引最佳索引使用策略 1.常见索引类型(实现层面) ...
【C语言重点难点精讲】关键字精讲
必读: C语言关键字是一个非常重要的话题,因为它能在相当的程度上将C语言的核心内容串联起来,起到一种提纲挈领的效果下面的内容重点提及的是相应关键字特别值得注意的地方,这些地方是我们经常忽略的,而且考 ...
C++的高精乘＋高精加
题目想法这题的原型就是在简单的求阶乘和基础上加入一个高精度操作那么把求阶乘的两步操作用升级版的高精度函数代替即可
Excel中VLOOKUP函数的详细用法（灰常有用，求加精！求加精！）
好久没有写博客了,这篇不关乎编程开发(以后的每一篇可能都不会了),记录下昨天晚上刚跟网易Excel女王学会的一招VLOOUP函数的用法吧,用法不难,自己又摸索着把"女王"教的知识扩 ...
移动设备上“精灵图”的制作
"精灵图"简单说来就是把网页中的图标文件合成到一张图片上,目的是每次http请求页面的时候只请求一张图片,不需要对服务器多次请求. 这是一张合成好的"精灵图", ...

什么是精灵图？如何使用精灵图

什么是精灵图？如何使用精灵图相关推荐

最新文章

热门文章