css雪碧图生成工具

css雪碧图生成工具CSS sprite在国内不少人叫css精灵，是一种网页图片应用处置方法。它允许你将一个页面涉及到的所有零星图片都包括到一张大图中去，如此一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。是由于要生成一个.sprite的文件，这个文件会存储目前你的雪碧图需要的图片信息，譬如图片名字什么的，为了保证每次打开.sprite文件都有图片。就智能拷贝一份图片过来，要不然找不到

为何要用这个工具

1.加快网页加载速度

浏览器同意的同时请求数是10个，假如图片过多会干扰整体的视觉成效，而且对于不稳定的互联网带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，与加速页面渲染

2.后期维护简单

该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用!

怎么用

1.用ps或者dw把需要的图片切下来

2.打开CssSprite.exe

打开CssSprite.exe文件

3.打开图片

点击左上角按钮打开图片

目前版本中一次只能打开一类型型的图片文件

4. .sprite文件

此次更新中新增了生成图片的时候同时生成.sprite文件的功能，程序中可以通过点击按钮“打开.sprite”按钮，选择.sprite文件，还原雪碧图原视图

请务必保证.sprite与其中的图片文件在同一文件夹内

5.排布图片

可以选择上面的最上面按钮今天横竖的默认排布，也可以鼠标选中图片拖动地方，拖动完成后程序会依据内部图片的地方生成面积最小的雪碧图，当然也会改变相应的图片地方

可以点击+，-号图片按钮添加与删除图片，现在只能操作单张的图片。

6.代码生成

在程序中可以生成sass代码，与css代码，看自己需要嘛，自己选择，选中“是不是是手机端”的时候会把所有些尺寸除以2，由于手机端总是会设计图比较大，所以要缩放，建议生成图片后再复制生成的代码

7.保存雪碧图

点击“生成雪碧图”按钮，程序会默认选中你在第3步的时候打开图片的地址，然后点击确定后生成雪碧图。

生成的同时会生成.sprite文件

版本更新：

1、增加推广客户端版本更新提醒

服务器端版本更新后，推广客户端假如没更新要最新版本，会在标题中提示，点击更新按钮出现版本更新的简单介绍

2、删除多余的选择背景颜色功能

雪碧图在生成的时候其实大部分状况下是无需指定背景颜色的，所以去掉这个累赘的功能

2、增加base64代码生成

目前不少图片都有base64的代码，不过建议还是用grunt或者gulp来处置base64代码的状况

3、增加单张图片选中后上下左右按键移动的功能

选中单张图片后，点击上下左右按键可进行微调

4、增加选中多张图片微调功能

鼠标在画布中拖动会形成矩形选框，放开后会选择框里的图片，按下键盘上上下左右按键可使蓝色选框与蓝色选框中的图片对象同时移动

css雪碧图生成工具V3.0主要改进

1.增加了单独添加单张图片与删除单张图片的功能

2.增加了生成.sprite文件用以保存雪碧图信息

3.增加了打开.sprite文件功能

TAG标签：css背景图(1)css精灵(1)CSSsprite(1)

转载请说明来源于小浣熊下载站（http://www.tpwno.com）

本文地址：http://www.tpwno.com/soft/6065.html

郑重声明：文章来源于网络作为参考，本站仅用于分享不存储任何下载资源,如果网站中图片和文字侵犯了您的版权，请联系我们处理！邮箱3450399331@qq.com