css sprite雪碧图制做，使用以及相关，图文gif。

写在前面：

在网页制做中，雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分。本文主要内容包括雪碧图如何制做，雪碧图优缺点，哪些场景须要使用雪碧图。

实现原理：

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减小你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非img标签。

1.前期准备下载工具：css sprit（css精灵）

长这样：

css sprit

看图片就知道多好用！

文件不到200k，至关轻便，这是百度云连接：pan.baidu.com/s/1nuOZDqT

也有mac版本的，这是连接：dl.pconline.com.cn/download/42…

2.使用方法

下载，打开以后。
1.首先要切一些图片，不会切的话，移步：《前端ps切图方法，图文详细》

2.打开雪碧图，选择图片。

3.添加完图片以后，会自动生成代码，须要排列一下图片：

能够看到我排列图片的时候，下面的代码也会跟着刷新

能够看到排列图片的时候，下面的代码也会跟着刷新

注意：排列图片的时候要注意各个图片之间留点空隙，否则使用的时候，会相互覆盖。

3.保存图片以及雪碧图css代码

保存雪碧图

生成的雪碧图：

保存雪碧图-css代码（由于软件没有到导出css代码的功能，因此要本身新建一个txt文件，放在雪碧图旁边，之后打开txt就知道图片在雪碧图的位置。）

gif操做：

如何在html中使用？

慕课网雪碧图：

慕课网demo： www.imooc.com/code/1511。
慕课网雪碧图教程： www.imooc.com/learn/93

3.雪碧图优劣势

1.加快网页加载速度

网页上面每一张图片，都要向浏览器请求下载图片，而浏览器接受的同时请求数是10个，一次能处理的请求数目是两个。

http发起请求，最耗时的是在三次握手，每次请求以前都要握手。因此在网页性能优化中，减小http请求的次数是至关重要的一点！（原本想写多一点，但有些知识点不太清楚，怕误人子弟就再也不赘述了。）

当一个网页有几百张，几千张图片的时候加载起来简直了！并且对于不稳定的网络带宽，加载起来更是噩梦，因此把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染

2.后期维护简单

该工具能够直接经过选择图片进行图片的拼接，固然你也能够本身挪动里面的图片，本身去布局你的雪碧图，更换图片的时候也只要更改一下图片的位置就能够了。直接生成代码，简单易用

三、CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。

四、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。

五、更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便。

关于雪碧图的缺点内容：不要滥用雪碧图sprite

里面说了蛮多的，这事情能够根据使用场景来决定，你们能够看看，毕竟我是来教雪碧图的。。。
下面有关于雪碧图的demo。

以前写过两篇相关的：
1.前端ps切图方法，图文详细
2.ps切图实用小技巧、图片格式的区别及相关内容

以上，2017.4.10。

最后又到了观众朋友们最喜欢的求赞求关注环节：但愿看完的朋友点个喜欢，也能够关注一下我，如今这阶段基本上每月都不会少于十五篇文章（看到干货我也会进行分享）。码字不易，感谢支持，感激涕零！
ps：目前待业，坐标北京，求推荐工做。而后但愿我写哪方面的文章能够在底下评论，或者是私信我，虽然写的很差，但我就当这是记录本身成长的一种方式咯。（前提是我会了，若是不会我也会记下来，等会了的时候再更出来。）
**掘金我的主页 ，简书主页连接，csdn博客主页连接 ，github 。