css sprite 雪碧图

1、什么是雪碧图？

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

a、前端展现

          

b、css雪碧图为

                                                         

二、概念

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

三、何时用到雪碧图？

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

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

c、加载量比较大

四、工具介绍

　　刚刚下载了一个比较实用的雪碧图工具Css Sprite Tools(CST CSS图片拼合定位工具) 1.0(方便本身下载)

五、工具使用步骤

①、用ps把小图片切好

②、打开软件

③、打开图片

点击左上角的“选择多幅小背景图片”，选择多张图片，点击打开

④、排布图片

能够选择上面的最上面按钮今天横竖的默认排布，也能够鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置生成面积最小的雪碧图，固然也会改变相应的图片位置

我是本身排的

⑤、代码生成

点击“选择目录并生成测试文件”按钮

点击肯定

⑥、保存雪碧图

⑦、前端展现

⑧、材料

所须要的代码就在css/bgs.css文件里面

所须要的图片在imgs里

 

 

 

 坚持把每个小知识点弄明白、完全！！！