css sprite 雪碧图

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，

这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示雪碧图的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

一、什么是雪碧图？

优点:

• 减少请求数
• 图片总 size减少
• 提前加载图片

图片变成一张肯定所占位置更少，减少加载时间，增强用户体验；

作为设计师来说不用对各种小图标命名，减少工作量，再一个就是对风格的更改整体操作来说更为简便。

缺点：背景大小，容易出现断裂，相比之下不是直接替换照片，而是利用PS来测量好每一个的位置，环节繁琐一些，当然更改部分元素的同时需要动整体，也比较麻烦一些。

总的来说：图片拼合技术适用于网页上图标相对不会变动的情况下，像经常会用于更新更改的区域，更换图片等等的并不建议使用。

1、我们先来看一下淘宝上面用到的雪碧图实例：

a、前端展示

b、css雪碧图为

2、概念

CSS sprite在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

3、什么时候用到雪碧图？

a、静态图片，不随用户信息的辩护而变化

b、小图片，图片容量比较小

c、加载量比较大

4、工具介绍

　　刚刚下载了一个比较实用的点我下载 提取密码 hu90

Css Sprite Tools(CST CSS图片拼合定位工具) 1.0(方便自己下载)

5、工具使用步骤

①、用ps把小图片切好

②、打开软件

1、打开软件，将会看到下图界面，整个界面比较简洁，各功能区一目了然，我们需要做的是点击左上角的“选择多幅小背景图片”

 

2、勾选所需要整合的小图后，载入，可选择“小图竖排”或“小图横排”进行排序，也可手动挪动图标进行布局。

 

3、填写中间部分的选项。css中文件夹路径是大图将要存放的位置，相对于css样式表的路径，请按照实际情况进行填写；图片名称自定义。

4、可以生成sass代码，以及css代码，看自己需要，自己选择，选中“是否是手机端”的时候会把所有的尺寸除以2，因为手机端往往会设计图比较大，所以要缩放，建议生成图片后再复制生成的代码

5、点击“生成雪碧图”就可以保存大图了