关键词：
最近公司项目需要增加一个需求，需要给组件设置动画类型，而每种动画类型都需要一个对应的动画图标，这里就使用了雪碧图。
一、什么是雪碧图
百度百科：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
举个栗子：淘宝首页
上图中的图标，实际就是如下一张背景图
二、为什么要用雪碧图
减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。
三、雪碧图布局
下面的代码为使用淘宝的背景图简单的实现以下效果
1 <template> 2 <div class="anima"> 3 <ul class="list"> 4 <li class="list-1"> 5 <i></i> 6 <p>充话费</p> 7 </li> 8 <li class="list-2"> 9 <i></i> 10 <p>旅行</p> 11 </li> 12 <li class="list-3"> 13 <i></i> 14 <p>车险</p> 15 </li> 16 </ul> 17 </div> 18 </template> 19 <script> 20 export default ; 21 </script> 22 <style lang="less" scoped> 23 .anima 24 .list 25 li 26 cursor: pointer; 27 width: 60px; 28 height: 60px; 29 text-align: center; 30 float: left; 31 i 32 background: url(/static/images/bj.png); 33 display: block; 34 width: 24px; 35 height: 24px; 36 37 p 38 height: 24px; 39 width: 100%; 40 text-align: center; 41 line-height: 24px; 42 43 44 .list-1 45 i 46 background-position: 0 0; 47 margin-left: 20px; 48 49 50 51 .list-2 52 i 53 background-position: 0 -87px; 54 margin-left: 20px; 55 56 57 58 .list-3 59 i 60 background-position: 0 -44px; 61 margin-left: 20px; 62 63 64 65 66 </style>
实现效果如下图
最后：一般制作雪碧图的时每个小图标的宽高应该是一样的，方便我们定位~
web前端html5&css314-雪碧图与渐变(代码片段)
雪碧图与渐变笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版目录雪碧图与渐变1.雪碧图2.线性渐变3.径向渐变雪碧图与渐变1.雪碧图解决图片闪烁的问题：可以将多个小图片统一保存到一个大图片中，然后通过... 查看详情
css雪碧图(代码片段)
CSSSprite初探之原理、使用CSSSprite简介：利用CSSSprites能很好地减少了网页的http请求次数，从而大大的提高了页面的性能,节省时间和带宽。CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及... 查看详情
web前端之背景雪碧图(代码片段)
目录一、背景二、雪碧图一、背景background-color 设置背景颜色background-image 设置背景图片如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满如果背景图片大小大于元素，则背景图片一部分会无法完... 查看详情
移动端rem布局背景图片使用以及sprite雪碧图
现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。rem布局所谓rem布局就是指为文档的根节点<ht... 查看详情
精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术
精灵图 精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上，以背景引入,并使用background-position调整背景位置，使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速... 查看详情
多个图标图片（雪碧图）使用css样式显示(代码片段)
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器... 查看详情
createjs使用雪碧图代码
//创建一个精灵图路径与每个图的位置varresult={"images":[‘img/img./png‘],"frames":[[0,0,100,100],[100,100,100,100],],"animations":{‘p1‘:[0],‘p2‘:[2],}}//生成sheetvarspriteSheet=newcreatejs.SpriteSheet(result);//调用指定图案var 查看详情
制作雪碧图代码示例
制作雪碧图的辅助工具是ps，先要测出所要的图片的宽高写到代码中去，给它预留位置大小，然后测出所要点击后的图标移动位置的宽高写入代码。 &nbs... 查看详情
webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader(代码片段)
...文件夹里添加3张图片3、安装依赖npmispritesmith4、测试合成雪碧图的代码新建test.js文件constSpritesmith=require('spritesmith');constsprites=['./src/img/kaimo-001.png','./src/img/kaimo-002.jpg','./src/img 查看详情
响应式下的雪碧图解决方案
...的居中布局时，我们常用background-position这个属性来进行雪碧图的定位，在减少数据量的同时，保证准确定位。在移动端使用越来越重的现在，以往的传统定位，已经无法达到目的，那么是否有合适的解决方案呢？答案是有的，... 查看详情
雪碧图
雪碧图技术（精灵图）多个图合并后，根据位置出现特定的一张图片，只需加载一次，速度快。前提：组合的每张图宽和高都要一致。出现图片的位置为循环式代码：<styletype="text/css">div{width:150px;height:120px;outline:1pxsolidred;back... 查看详情
css雪碧图及jquery定位代码
...么实现的？后来询问得知，这是css精灵技术（sprite）也叫雪碧图。 CSS知识点：background-imagebackgorund-position特点：相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片 查看详情
css雪碧(代码片段)
css雪碧(代码片段)
rr布局图(代码片段)
web前端练习31----css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）(代码片段)
参考文档：https://man.ilovefishc.com/css3/一、基本选择器：1通配符选择器*2元素选择器element3类选择器.class4id选择器#id5内联样式style二、复合选择器：1交集选择器 element.class||element#id2并集选择器 element1,element2,element3,...3... 查看详情
该如何以正确的姿势插入svgsprites？(代码片段)
...——苏南(South·Su)，今天要给大家分享的是SVGSprites(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～ 当下流程的移动端，手机型号太多太多，今天工作项目中突然发现还有同事在使用以前大家... 查看详情
css雪碧图压缩
cssgaga下载地址链接:https://pan.baidu.com/s/1Q9xH_XzumIc7vTLCZ3tr5A提取码:stqeCssGaga功能特性合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；优化、压缩CSS代码，减少带宽占用，加快下载速度；优... 查看详情