关键词：
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。
1.先看一下雪碧图
没有使用雪碧图时图标是这样一个个的单独文件：
合成雪碧图后是这样拼在一起的一张图：
2.雪碧图的使用
首先确定要使用的图标的位置和大小（可以通过ps测量），
如下的雪碧图大小统一，排列规则
它们的大小均为30px*30px，第一个图标位置为0 0，第二个的位置为30px 0，依次...
样式可以这样写：
1 .box1 li:nth-child(1) { 2 width: 30px; 3 height: 30px; 4 background: url(./images/map-icon.png) no-repeat 0 0; /* 第一个图标*/ 5 } 6 7 .box1 li:nth-child(2) { 8 width: 30px; 9 height: 30px; 10 background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二个图标*/ 11 } 12 13 .box1 li:nth-child(3) { 14 width: 30px; 15 height: 30px; 16 background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三个图标*/ 17 }
页面上效果：
排列不规则的雪碧图测量计算就不太方便了，推荐一个在线雪碧图样式工具http://tools.jb51.net/code/css_sprite
3.合成雪碧图
如果没有美工MM给我们做图，自己找来的很多零碎图标(.png)可以使用CssSprite工具进行合成。
CssSprite.exe使用较为简单，选择图片后，可以竖排或横排，也能手动调整位置；设置css中路径名及保存名称，生成雪碧图即可，可以同时生成对应的css代码。
工具源码地址：
https://github.com/iwangx/sprite
编译后的exe工具：
https://github.com/shiyuan598/htmlcss/raw/master/sprite/tools/CssSprite.exe
另外也有在线工具可用：
https://www.toptal.com/developers/css/sprite-generator
csssprite雪碧图
一、CSSSprite雪碧图使用场景浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显，为了解决这个问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图... 查看详情
sprite学习
CSS雪碧图，就是把所有的图表，按钮和图形包含在一个图像里面。它要求：静态图片，不随用户信息变化而变化；小图片，图片容量比较小；加载量比较大。使用这种技术可以减少Web浏览器发出的服务器请求，显著加快下载速度... 查看详情
在rem单位下使用雪碧图实现自适应
参考技术A雪碧图是根据CSSsprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏... 查看详情
移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配，大致操作就是按照一定尺寸设计稿进行制作，最后将所有px值转换为rem，但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右)，如果公司要求不高倒也无所谓，但是... 查看详情
sprite(雪碧图)的应用
雪碧图是根据CSSsprite音译过来的，是将很多很多的小图标放在一张图片上。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服... 查看详情
移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量，提高网站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，然后根据background-position来进行定位。在web端由于是固定的大小与left、top，所以定位起来会比较准确、简单。但是在移动端就不... 查看详情
使用雪碧图（csssprite）
CSS雪碧 即CSSSprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。使用雪碧图的优点有以下几点：将多张图片合并到一张... 查看详情
简单的使用gulp生成雪碧图
...线工具：https://www.toptal.com/developers/css/sprite-generator。生成雪碧图是极其方便的。现在呢，我们来试试用gulp来生成雪碧图。第一步：去淘宝镜像地址（http://npm.taobao.org/）里安装cnpm。$npminstall-gcnpm--registry=https://registry.npm.taobao.org由... 查看详情
photoshop制作雪碧图技巧
雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。步骤：1、使用Photoshop新建一张背景透明的图片2、将... 查看详情
雪碧图的制作
雪碧图，又称精灵图，利用其定位来确定我们需要采用的图片。 使用方面，大大的减少了请求次数，提高了效率。合并雪碧图，需要将所有的图片的宽高设置成一样的。然后利用其在X、Y轴的位置来确定图片。举例说明：这... 查看详情
csssprites——雪碧图的使用方法
首先解释下CSSSprites是什么：有称CSS精灵，有称CSS雪碧的，无论叫什么，他的作用就是把网页上很多小图标放到一张图片里面，然后通过CSS里面的background-position来控制每个图片的坐标，这样不但减少http请求，而且还降低了图片的... 查看详情
雪碧图制作使用的几种方式！
对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！ 一、雪碧图制作 在线生成雪碧图网站 网站的内容如下：通过点击左侧，我们可以选择一个文件夹，将我们希望... 查看详情
雪碧图制作使用的几种方式！
对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！ 一、雪碧图制作 在线生成雪碧图网站 网站的内容如下：通过点击左侧，我们可以选择一个文件夹，将我们希望合成... 查看详情
sprites.png雪碧图
长时间不用把精灵图怎么用给忘了。。。一、PC端 给所用到精灵图的元素设置background:url(sprites.png路径); background-position:-x-y;其中：-x，-y是该icon到图片左侧、上方的距离二、移动端 1、同样设置元素的background:url(sprites.... 查看详情
css雪碧图及jquery定位代码
...么实现的？后来询问得知，这是css精灵技术（sprite）也叫雪碧图。 CSS知识点：background-imagebackgorund-position特点：相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片 查看详情
移动端rem布局背景图片使用以及sprite雪碧图
现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。rem布局所谓rem布局就是指为文档的根节点<ht... 查看详情
网站性能优化之雪碧图制作
...成一张雪碧图，从而减少图片的请求数，优化网站性能。制作方法：1、刀耕火种法 利用photoshop把一张张小图合成一张雪碧图（工作效率太低不建议使用）；2、机械生产法： 利用在线生成工具生成雪碧图： 工具地址... 查看详情
css精灵图&字体图标
...合到一张大图片中。这个大图片也称为sprites精灵图或者雪碧图移动背景图片位置，使用background-position移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同使用精灵图的时候需要精确侧脸， 查看详情