Css背景图合并工具功能增强(附V0.11源码和可执行文件)

2008-12-18日更新至0.11版

修复了在0.1版中的GIF图片质量差的问题。

附最新的源文件可执行文件。欢迎大家使用,反馈。(使用此工具需要安装微软的dot net framework 2.0)

----------------------------------------------------------------

2008-12-15日加上版本号0.1版

Css背景图合并工具,添加了几个辅助功能:

  1. 添加了用鼠标拖动图片或者用方向键改变图片位置的功能
  2. 可以设置整幅大图的生成类型,因为png文件在ie6下透明色显示有问题,所以朋友提出这个问题
  3. 可以设定大图的背景色,默认为透明色
  4. 可以在选中图片之后用“+”按钮添加更多的图片
  5. 可以在选中图片之后,用“-”按钮移除图片,或者直接用Delete键移除选中图片
  6. 添加了工具图标

感谢大家对此工具的支持。下面是最新的截屏

附最新的源文件可执行文件。欢迎大家使用,反馈。(使用此工具需要安装微软的dot net framework 2.0)

谢谢各位的支持。

我的微博地址是:http://weibo.com/yukaizhao 我会把一些技术心得碎片写到微博中,欢迎关注。
标签: css, tool
posted @ 2008-12-15 09:22 玉开 阅读(7960) 评论(61) 编辑 收藏

 回复 引用 查看   
#1楼2008-12-15 11:14 | 任力      
很好的想法~~
特别喜欢有想法立即去做的人!
自己这方面还存在很大不足,我总是用FW工具拼成的,每次都需要花一些时间,写的时候一点一点的调整。

 回复 引用 查看   
#2楼[楼主]2008-12-15 11:15 | 玉开      
@任力
呵呵,那正好你可以用下这个工具,工具会给出每一个小图的css参考,而且也可以用鼠标移动小图位置。

 回复 引用 查看   
#3楼2008-12-15 13:10 | Carrod      
用了一下,不错。
支持~~~
不过保存gif时色彩失真了,是不是改一下gif参数?

 回复 引用 查看   
#4楼[楼主]2008-12-15 13:46 | 玉开      
@Carrod
确实有这个问题,我查查资料,再修改一下。

 回复 引用 查看   
#5楼2008-12-15 17:22 | 朝晖的.net      
支持一下.....
 回复 引用 查看   
#6楼2008-12-16 09:12 | Crayon      
动态的GIF生成过后,动态效果就没有了
 回复 引用 查看   
#7楼[楼主]2008-12-16 12:34 | 玉开      
@Crayon
背景图用动态的不常见,而且动态的gif会有多帧,不同图片每一帧的时间间隔不同,这样的图片不适合做成大图,所以不支持此功能。

 回复 引用   
#8楼2008-12-17 10:02 | studynote[未注册用户]
这软件设计得相当有用,平时我使用时都是用PS拼的,现在有这个就当然不错了;
提个建议,能不能在选中图片时不要加黑色的框,改成在小图片的上面加个半透明的层;
还有能不能增加放大功能、刻度尺等功能。

 回复 引用   
#9楼2008-12-17 10:07 | studynote[未注册用户]
对了,也给软件加个好看点的图标吧,这么好用的软件怎么能没有一个图标呢,
 回复 引用 查看   
#10楼[楼主]2008-12-17 12:28 | 玉开      
@studynote
谢谢你的提议,放大功能和刻度尺功能都是可以加的。这两个功能完成之后,我会发随笔,请关注。

现在你可以选中下图,就会显示推荐的css,在推荐的css中有图片的位置。

 回复 引用 查看   
#11楼[楼主]2008-12-17 12:29 | 玉开      
--引用--------------------------------------------------
studynote: 对了,也给软件加个好看点的图标吧,这么好用的软件怎么能没有一个图标呢,
--------------------------------------------------------
可惜这个我是外行呀,你能不能帮个帮,帮我设计一个,到时候我会在软件中也署上你的名字。

 回复 引用   
#12楼2008-12-17 14:22 | 菠菜[未注册用户]
这个工具太好了,非常有实用价值。一定帮你写文章宣传。
下载使用了,非常好,对于使用CSS sprite技术的朋友来说,是必备的工具。

 回复 引用 查看   
#13楼[楼主]2008-12-17 14:27 | 玉开      
@菠菜
嗯,感谢。能得到认可就是最大的收获。

 回复 引用 查看   
#14楼[楼主]2008-12-18 17:30 | 玉开      
@玉开
修复了Gif图片质量的问题。

 回复 引用   
#15楼2008-12-19 01:02 | 小于子[未注册用户]
源码地址错了?
 回复 引用 查看   
#16楼[楼主]2008-12-19 08:47 | 玉开      
@小于子
谢谢,已修改链接地址。

 回复 引用   
#17楼2008-12-20 16:26 | Haver[未注册用户]
加上网格可能会效果好一些了。
 回复 引用 查看   
#18楼[楼主]2008-12-22 08:55 | 玉开      
@Haver
多谢您的建议,争取在V0.12版本中添加网格和标尺的功能。

 回复 引用   
#19楼2008-12-23 12:40 | 明城[未注册用户]
感觉不错,用了下提点小意见

1,加个网格(上面的仁兄似乎也说了),如果可以的话最好能做到根据网格悬浮,还有自定义网格大小
2,能否一键自定义载入图片之间的间距
3,输出格式我喜欢 PNG 的,能否有输出选项呢,比如输出成 PNG8 或者 PNG24

瑕不掩瑜,总之兄弟的这东西不错,赞!

 回复 引用 查看   
#20楼[楼主]2008-12-23 12:49 | 玉开      
@明城
感谢您的建议.这些功能完成后,我会通知您.

 回复 引用   
#21楼2008-12-25 19:32 | csssp[未注册用户]
操作区域有点小,图片合成后只能显示当前窗口截取的图案,超出软件窗口的就断开了,虽然不影响使用,但是这样更人性化一些.还有就是希望输出图片时能调节图片的质量.另外就是能支持把图片直接拖进操作窗口就更好了!
不过还是顶一个!

 回复 引用   
#22楼2008-12-27 20:51 | 晴枫[未注册用户]
如果能图标排列能排成A*B的设置会更好,这样看整体效果会比较方便。还是感谢博主,这样用CSS Sprite确实方便很多
 回复 引用   
#23楼2009-01-09 11:04 | 咖啡636[未注册用户]
反馈个问题!
我用这个工具合并后。。页面加载数据后。。鼠标放到背景图上会出现链接。本来是没有链接的。。

 回复 引用 查看   
#24楼[楼主]2009-01-09 11:15 | 玉开      
不可能呀,这个只是个css的样式怎么可能有链接呢,你可以把你的用法贴一下。
 回复 引用   
#25楼2009-02-19 07:40 | 和氏璧[未注册用户]
这个软件都可以用来做什么?
 回复 引用 查看   
#26楼2009-02-22 00:38 | Biny      
非常好用的一个工具,下载来使用过,和前面朋友存在同样的期望:
1.加刻度尺和网格
2.只有横向和纵向的排列方式不能完全满足需要,常常要手工来排图片,但有一个比较麻烦的事情是,如果手工排列,当图片重叠时不会自动相邻图片边缘排列,这样会产生尺寸上的重叠偏差。这是我最后还是放弃这个工具用PS来排列的原因。所以加入图片吸附功能是当务之急。
3.另外,界面在简陋了。
可能要求得比较多一点,望见谅,希望早日出新版,迫切迫切!呵呵!

 回复 引用   
#27楼2009-02-26 10:10 | snowqiang[未注册用户]
bug:
载入图片选中后无法取消选择

建议:
增加布局算法, 和防止图片相互覆盖选项

 回复 引用   
#28楼2009-03-01 05:50 | ps无语[未注册用户]
要是能保存配置就好了,以便下次有新图片的时候再添加,现在好像是重新来过。。。
 回复 引用   
#29楼2009-03-02 12:00 | Ghostzhang[未注册用户]
感谢博主写的这么方便的一个工具。

刚下载使用了一下,发现一个小bug:当只添加一张图时,“小图纵排”和“小图横排”的按钮会失效。

期待新版本的发布。

 回复 引用 查看   
#30楼[楼主]2009-03-02 17:34 | 玉开      
--引用--------------------------------------------------
Ghostzhang: 感谢博主写的这么方便的一个工具。

刚下载使用了一下,发现一个小bug:当只添加一张图时,“小图纵排”和“小图横排”的按钮会失效。

期待新版本的发布。
--------------------------------------------------------
这不是一个bug,当只有一张小图时,纵排或横排无意义,所以会失效。

 回复 引用 查看   
#31楼2009-03-11 17:36 | 周德伦      
2个疑问:
1.省去了加载时候的连接?这能节省多大宽带?
2.很多背景图是灵活的,不是固定死的。这样,不能像你绘图那样来定义他们的位置

 回复 引用 查看   
#32楼[楼主]2009-03-12 13:16 | 玉开      
@周德伦
1. 访问量巨大的时候才有效果,如果访问量很小可以不考虑,在访问量大的时候,这种做法绝对是值得的,你可以看看新浪,淘宝,百度的做法
2. 工具也是需要灵活运用的,你可以把这些图片分成需要横排的和需要纵排的两种一般就可以解决问题了。

 回复 引用   
#33楼2009-03-13 01:46 | 香草檸檬[未注册用户]
節省很多寶貴時間,幫助相當大
是否可以推出utf-8版本,繁中顯示才不會有亂碼


 回复 引用   
#34楼2009-04-13 11:34 | 小小小草[未注册用户]
非常好用的工具,另外再提2个建议:

1、增加保存工程文件,这样图片更改时就可以在原来的基础上修改,不用从头再来,毕竟,大量的css修改起来是很费时间的。
2、使用默认的横排或竖排时,图标总是靠的很近,能不能增加一个自定义图标间距的功能。

 回复 引用   
#35楼2009-04-16 00:48 | tglgx[未注册用户]
HI,你的这个工具非常好用(:早前就拿到了源码,使用时发现生成gif时透明效果不理想,png在ie6又存在问题,一度放弃了修改而使用 http://spritegen.website-performance.org/ 来生成,今天忽然灵光一动,何不将生成的png通过ps转化为gif呢,毕竟只有一个图转换,于是又燃起我修改的欲望(:
http://my.tglgx.cn/CssBgImageMergeTool.rar 这个是我通过你的源码修改来的,如果再加上工程管理功能应该比较完美了,你看看,效果合适给我发邮件,我把源码发给你(:

非常棒!
 回复 引用 查看   
#37楼[楼主]2009-04-16 12:22 | 玉开      
@tglgx
感谢你的奉献。

 回复 引用   
#38楼2009-04-30 09:56 | xfhuang[未注册用户]
老大的工具真的很棒。

不知道保存配置,这一功能有没开发?或者打算开发中?

没有这个功能,有新图片要加入,就比较麻烦了。

希望老大能努力把它给完善了

支持您!

 回复 引用 查看   
#39楼2009-05-14 16:59 | 爱在戏院前      
大爷啊,我要的是透明,怎么都会带一个底色?
 回复 引用 查看   
#40楼2009-05-14 17:06 | 爱在戏院前      
唉,我明白了,要生成png的才是透明的
 回复 引用   
#41楼2009-05-15 18:01 | dragonshrimp[未注册用户]
0.1版本生成的gif会失真。
0.11版本生成的gif不能透明。

建议楼主更新一下,修复0.11的bug。

谢谢。

 回复 引用   
#42楼2009-06-12 14:30 | tglgx[未注册用户]
老大,见你那么就没有更新这个工具,小弟我先发布个(:

http://blog.tglgx.cn/post/2009/06/12/e59bbee78987e59088e5b9b6e5b7a5e585b7-v01-e58f91e5b883.aspx

功能基本一样,为后续做准备

 回复 引用 查看   
#43楼[楼主]2009-06-15 14:05 | 玉开      
--引用--------------------------------------------------
tglgx: 老大,见你那么就没有更新这个工具,小弟我先发布个(:

功能基本一样,为后续做准备
--------------------------------------------------------

欢迎扩展这个工具,把它做的更好。

 回复 引用   
#44楼2009-07-27 17:41 | tglgx[未注册用户]
老大,ImagesSprite V1.0 Beta发布
http://blog.tglgx.cn/post/2009/07/27/ImagesSprite-V10-Betae58f91e5b883.aspx

功能比较齐全,包含自动排列,排列模式,生成模式,项目保存等
主要问题还是在生成gif图片的质量上

 回复 引用   
#45楼2009-08-03 23:43 | 又一个五月[未注册用户]
感谢你的劳动
 回复 引用   
#46楼2009-08-21 09:43 | zuike[未注册用户]
很好,不过我一直在寻在不需要AIR环境,不需要.NET环境的类似软件。

即使不是软件,哪怕是能在PHP下运行的网站程序也好。

因为经常变换作业环境,像这些AIR、.net等环境就不想每到一处都装一次了。

不过很敬佩作者的精神和能力。

 回复 引用   
#47楼2009-11-28 14:46 | dfss[未注册用户]
非常好,感谢。正学习着呢,就看到这么实用的东西了
 回复 引用 查看   
#48楼2010-05-03 18:21 | pingjiang      
很棒啊,还可以继续完善!
 回复 引用 查看   
#49楼2010-06-04 12:31 | YoungCoder      
ding...
 回复 引用   
#50楼2010-06-04 14:35 | hello_aspnet[未注册用户]
发现一个bug:
--------------------------
当添加两张图片后,点击"-"删除一张,然后再添加一张进来,或者再连续添加N张进来,上面的排序按钮除报错说"请选择多个文件"
-------------------------

 回复 引用 查看   
#51楼2010-06-08 18:35 | 21天后      
支持!
----------
工具不支持全选

 回复 引用   
#52楼2010-06-24 09:47 | cybergoat[未注册用户]
很不错的一个软件,希望博主继续完善
 回复 引用 查看   
#53楼2010-09-06 22:45 | 嘿咻      
此文不错,值得推荐!
 回复 引用 查看   
#54楼2010-11-13 17:49 | 海口奶茶店      
此文不错,值得推荐!
 回复 引用 查看   
#55楼2010-12-09 11:10 | idamag      
好工具,收藏了~
 回复 引用 查看   
#56楼2010-12-09 12:05 | idamag      
能生成PNG-8就好了~
 回复 引用 查看   
#57楼2010-12-10 10:41 | 开心天使      
很好用,谢谢
 回复 引用 查看   
#58楼2011-03-02 15:06 | 微生物      
呵呵,还在网上找了半天,用来园子里就有啊。
 回复 引用   
#59楼2011-03-20 14:09 | 煮透社[未注册用户]
非常感谢,还是开源的,博主是个好人。
 回复 引用   
#60楼2011-09-20 09:46 | roro5119[未注册用户]
选择目录并生成文件后出错了
 回复 引用 查看   
#61楼2011-11-07 17:54 | 巴西球星      
厉害啊
发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1355081 8yZAA/q0iUA=