css sprit雪碧图制作，使用教程

写在前面：

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

实现原理：

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

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

长这样：

css sprit

看图片就知道多好用！

文件不到200k，相当轻便，这是百度云链接：http://pan.baidu.com/s/1nuOZDqT

2.使用方法

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

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

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

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

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

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

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

保存雪碧图

生成的雪碧图：

保存雪碧图-css代码

gif

如何在html中使用？

慕课网雪碧图：

demo在下面，可以直接复制回自己本地的html里面实验。
慕课网雪碧图教程：http://www.imooc.com/learn/93

3.雪碧图优劣势

1.加快网页加载速度

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

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

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

2.后期维护简单

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

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

4、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

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

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

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

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

以上，2017.4.10。

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

慕课网雪碧图demo：

<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin: 0;
padding: 0;
}
h3 {display: block;margin: 0;padding: 0;
}.cat {position: relative;width: 150px;background: #f8f8f8;border: 1px solid #bbb;
}ol, ul {list-style: none;
}li {z-index: 2;position: relative;display: block;height: 31px;line-height: 31px;overflow: hidden;margin: 1px 10px 0;vertical-align: bottom;border-bottom: 1px solid #dedede
}li h3 {font-size: 14px;font-weight: 400;
}li i {display: inline;float: left;margin: 3px 10px 0 0;height: 24px;width: 30px
}/* 在这里补充雪碧图的样式 */
.cat i{background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg) no-repeat;}.cat-1 i{background-position:0 0;}.cat-2 i{background-position:0 -24px;}.cat-3 i{background-position:0 -48px;}.cat-4 i{background-position:0 -72px;}.cat-5 i{background-position:0 -96px;}.cat-6 i{background-position:0 -120px;}.cat-7 i{background-position:0 -144px;}.cat-8 i{background-position:0 -168px;}</style>
</head>
<body><div class="cat"><ul ><li><i></i><h3>服装内衣</h3></li><li class="cat-2"><i></i><h3>鞋包配饰</h3></li><li class="cat-3"><i></i><h3>运动户外</h3></li><li class="cat-4"><i></i><h3>珠宝手表</h3></li><li class="cat-5"><i></i><h3>手机数码</h3></li><li class="cat-6"><i></i><h3>家电办公</h3></li><li class="cat-7"><i></i><h3>护肤彩妆</h3></li><li class="cat-8"><i></i><h3>母婴用品</h3></li></ul></div>
</body>
</html>