所有的

CSSSprites样式生成工具
1363
2013-11-6

学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里直接保存合并后的图片,因为还有一个图片质量的问题。

下面这个工具 csssprites.rar

CSS Sprites 68375F0F751F62105DE55177 v1.4.1

+双击添加层
+拖动层、修改层大小
+显示层相关信息
+编辑层信息、删除层
+生成样式
+保存样式文件到桌面
+在线更新
+输出样式时可选是否输出宽高
+重置层
+层位置和大小微调
+修正了已知的一些bug

需要AIR环境,可到 Adobe站点 下载安装。


CSS Sprites 68375F0F751F62105DE55177 v1.6.0

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

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

CSS Sprites 68375F0F751F62105DE55177 v1.9.0
+复制当前层
(fix)读取设置后再保存出错
(fix)修改了部分界面

(fix)支持中文路径

+图片背景色可改
+快捷键删除层
+拖动更改图片

+文件保存时覆盖提示
(fix)修改图片拖动响应区域

CSS Sprites 68375F0F751F62105DE55177 v1.9.4
+自定义保存路径
+单独复制宽、高、X坐标、Y坐标
+复制当前样式时类名可选择
(fix)修改默认层大小
(fix)拖入文件时检查类型
(fix)“关于“里的链接在浏览器窗口打开

(fix)保存时文件不能替换

+优化操作界面
+放大时定位到当前层位置
+图片放大不消锯齿
+图片放大6倍(用于原图过小的情况,大图片慎用)
(fix)图片放大后添加层再缩小信息出错

其它类似的工具:
将打包的小图以一定规则生成大图的 CSS 图片拼合生成器
使用ajax开发的 Sprite Creator

全部评论
(1)
评论速度
  • 2013-11-8
    f
    1楼
    2013-11-8 16:49:02
    回复
  • 2013-11-8
    2楼
    2013-11-8 16:30:13
    回复
  • 2013-11-8
    3楼
    2013-11-8 16:29:22
    回复
  • 2013-11-7
    补充一点,尤其是需要放很多小图标的时候就需要CSSSprites,不然不好管理.
    4楼
    2013-11-7 0:04:49
    回复
mores++

还可以输入 2000 个字符
添加表情