关键词：
对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！
一、雪碧图制作
网站的内容如下：
通过点击左侧，我们可以选择一个文件夹，将我们希望合成雪碧图的文件夹选中，然后就自动生成了，比如，我们选择下面的文件夹：
然后就会生成雪碧图：
可以看到，在右侧已经生成了雪碧图，而在左侧也已经把每一个小图片的css写好了，这样，我们就可以直接使用了。
参考文章：https://juejin.im/post/58eb062861ff4b006b576d9c
css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用... 查看详情
网站性能优化之雪碧图制作
雪碧图制作及使用制作目的：由于网站上有需要小的icon且每次加载的时候都会有许多类似的请求，影响了网站的性能。所以将小图标合并成一张雪碧图，从而减少图片的请求数，优化网站性能。制作方法：1、刀耕火种法 利... 查看详情
photoshop制作雪碧图技巧
雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。步骤：1、使用Photoshop新建一张背景透明的图片2、将... 查看详情
雪碧图的制作
雪碧图，又称精灵图，利用其定位来确定我们需要采用的图片。 使用方面，大大的减少了请求次数，提高了效率。合并雪碧图，需要将所有的图片的宽高设置成一样的。然后利用其在X、Y轴的位置来确定图片。举例说明：这... 查看详情
前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。1.css的transition... 查看详情
ps切图的几种方式
方法一点击图层右键--》导出为 导出需要的格式与大小方法二选择多个图层右键---》快速导出为PNG（导出的名字就是图层名字）方法三 查看详情
web前端啥是雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。一、使用雪碧图的优点有以下几点：将多张图片合并到一张图片... 查看详情
制作雪碧图代码示例
制作雪碧图的辅助工具是ps，先要测出所要的图片的宽高写到代码中去，给它预留位置大小，然后测出所要点击后的图标移动位置的宽高写入代码。 &nbs... 查看详情
自适应页面中如何使用雪碧图
自适应页面你肯定听说过，雪碧图想必你也听说过，不过在自适应页面中使用雪碧图应用的场景却不多，因为很多场景里自适应页面(移动端页面)的小图标啥的基本都做成字体图标了，操作起来也比较方便，不过有时候合成... 查看详情
vue安装及创建项目的几种方式(代码片段)
...建项目的几种方式VUE安装的方式直接用script标签引入对于制作原型或学习，你可以这样使用最新版本：<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>对于生产环境，我们推荐链接到一个明 查看详情
cssspritec下载,精灵图，雪碧图，初探之原理使用
CSSSpritec下载,精灵图，雪碧图，初探之原理、使用关于CSSSprite CSSSprites在国内很多人叫css精灵雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问... 查看详情
ps之雪碧图制作
...时，也会产生文件，所以我们还是选择源文件夹吧. 雪碧图生成. 让我们来使用一下&nb 查看详情
遍历集合的几种方式
1，使用迭代器Iterator的方式。2， 使用增强for循环的方式。3， 如果有下标，则可以使用下标的方式。（1）遍历数组（2）遍历List集合（3）遍历Set集合（4）遍历Map集合 查看详情
tableviewcell的几种重用方式的区别(代码片段)
...classforCellReuseIdentifier重用生成单元格方法共同点不同点在使用了r方法注册的情况下不使用r方法注册的情况下最终使用方式为什么不用r注册的方式尾文TableViewCell的几种重用方式的区别重用机制关于TableView的重用机制相信网上教... 查看详情
使用线程的几种方式
使用线程的几种方式1. 流水线：每个线程反复地在数据系列集上执行同一种操作，并把操作结果传递给下一步骤的其他线程，这就是“流水线”（assemblyline）方式；2工作组：每个线程都在自己的数据上执行操作... 查看详情
精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术
精灵图 精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上，以背景引入,并使用background-position调整背景位置，使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速... 查看详情
hive数据导出的几种方式
在hive的日常使用中，经常需要将hive表中的数据导出来，虽然hive提供了多种导出方式，但是面对不同的数据量、不同的需求，如果随意就使用某种导出方式，可能会导致导出时间过长，导出的结果不满足需求，甚至造成集群... 查看详情
关于perl中文件操作句柄使用的几种方式-基础版
在perl中存在几种句柄使用的方式，其中open为最基础的使用方法，下面把我遇到的几种句柄的使用方法做一个小小的总结： open方法的使用：open方法是教程中最基础的打开文件的句柄使用方法，较为常见教程中给出的使用方... 查看详情