CSS Sprites 样式生成工具

转自点点 14 年前 回复

, , , ,

学CSS布局的同学应该多少知道CSS Sprites(图片合并)技术,简单的说就是利用CSS的background-position属性,控制显示一张大图片的显示区域。例子可以看这里《CSS Sprites: Image Slicing’s Kiss of Death》。
对于经常使用CSS Sprites的同学,不知道是否有跟我一样的烦恼,在写定位的时候,先在PS里量出大概的位置,然后再在FF里用Firebug进行微调,以达到实际需要的效果。
效率方面的问题比较严重,虽然在做合并图的时候大概的位置都已经心里有数,不过在写样式的时候也不太可能每次都能记得住正确的位置,特别是像我这 种没啥记性的人,总免不了开着PS,时不时的量一下。更让我烦恼的是,原本性能就不高的电脑,开着个PS后运行起来就更慢了(至少一半内存被PS占用), 而这时的PS只是用来量位置,真是有点大才小用了。
很巧在网上逛的时候看到了赵玉开写的一个Css背景图合并工具,这个工具可以把许多的小图片合并成一张大图并生成样式,蛮不错的想法,只是并不真正实用。为什么这么说呢?因为一般情况下我们不会先切出小图再合并,这不符合工作习惯,我们大多数是在PS里直接保存合并后的图片,因为还有一个图片质量的问题。
受此启发,我写了下面这个工具bg2css_1.4.1.air

目前版本是1.4.1,基本上已经可以正常使用,主要是想减少使用CSS Sprites技术时测量坐标及填写background-position定位这部分重复而枯燥的时间,提高工作效率。
程序名称:CSS Sprites 样式生成工具(bg2css)
版本信息:
v1.4.1 2009-3-21
=====================
+双击添加层
+拖动层、修改层大小
+显示层相关信息
+编辑层信息、删除层
+生成样式
+保存样式文件到桌面
+在线更新
+输出样式时可选是否输出宽高
+重置层
+层位置和大小微调
+修正了已知的一些bug
需要AIR环境,可到Adobe站点下载安装。
还有很多的想法没在这个版本中实现,后续再做更新,如果使用中有什么意见或建议,欢迎与我联系,我尽可能的改善这个工具。
如何获取最新版本:下载安装1.4.1版本后点击“检查更新”即可。
版本更新信息:
bg2css v1.5.0 2009-3-25
+图片放大预览
(fix)空值无验证
bg2css v1.5.1 2009-3-26
+图片放大培数可改
bg2css v1.6.0 2009-3-27

+边界验证
(fix)修改类名后放大失效
bg2css v1.7.0 2009-4-1
+保存层位置信息
bg2css v1.8.0 2009-4-7
+复制样式
+层列表,以方便管理
bg2css v1.8.1 2009-4-9

+一定范围的负边界
+复制选中层的样式
(fix)输出0时的显示
注意:保存的设置文件增加一个项,请在之前保存的xml里的“imginfo”节点下手动增加一个“margin”节点,值为“0”.
bg2css v1.8.2 2009-4-10

+公共样式部分可编辑
(fix)修改了部分界面
注意:保存的设置文件增加一个项,请在之前保存的xml里的“imginfo”节点下手动增加一个“gbstyle”节点,值为“”.
bg2css v1.9.0 2009-4-12

+复制当前层
(fix)读取设置后再保存出错
(fix)修改了部分界面
bg2css v1.9.1 2009-4-12
(fix)支持中文路径
bg2css v1.9.2 2009-4-13
+图片背景色可改
+快捷键删除层
+拖动更改图片
bg2css v1.9.3 2009-4-14
+文件保存时覆盖提示
(fix)修改图片拖动响应区域
bg2css v1.9.4 2009-5-2

+自定义保存路径
+单独复制宽、高、X坐标、Y坐标
+复制当前样式时类名可选择
(fix)修改默认层大小
(fix)拖入文件时检查类型
(fix)“关于“里的链接在浏览器窗口打开
bg2css v1.9.5 2009-5-2
(fix)保存时文件不能替换
bg2css v2.0 2009-5-12
+优化操作界面
+放大时定位到当前层位置
+图片放大不消锯齿
+图片放大6倍(用于原图过小的情况,大图片慎用)
(fix)图片放大后添加层再缩小信息出错
帮助文件
其它类似的工具:
将打包的小图以一定规则生成大图的CSS 图片拼合生成器
使用ajax开发的Sprite Creator
转自:http://www.cssforest.org/blog/index.php?id=129

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)