iwangx / sprite

css雪碧图简单制作工具

css sprite

	css雪碧图简单制作工具
	
	可以通过图片，直接生成sprite文件，并且生成代码
	
	可以通过鼠标点击调整图片位置

	可以添加单张图片，以及删除单张图片

	可以保存为.sprite文件，以后好维护
	

编程不易大家支持下吧

CSDN下载地址

http://download.csdn.net/detail/wx247919365/8741243

V4.3最新版本介绍

http://www.cnblogs.com/wang4517/p/4529741.html

sprite's Issues

mac版的

大佬,有木有计划搞个mac版的?

图标排版间隙问题

点击小图标排序时，图标之间的间隙太小了，有些地方还略有重叠！能否加一个控制间距的参数？

@_400 之后的less 变量定义没有

@_400 之后的less 变量定义没有

怎么运行

看了半天没看到怎么运行

宽度超过30000px后的图片会重叠在一起

能解决下排序问题吗?

合并雪碧图做动画, 需要固定的顺序排序.

希望能修改更改图片的类名

如题
还有选中图片时可以有个反馈

导入的图片，会压缩图片

不清楚是否存在导入的图片，会压缩图片的大小，因为我导入15张9055的透明底图片，生成的雪碧图大小是"136455",因为生成不了1350*55大小的图片，导致用css3 animation动画时，是滑动的，希望不会压缩图片的实际大小。

无论如何导入图片均为乱序

批量生成的时候，程序不能按照图片的命名排序？

如题，期待您的改进：）

我

几个小建议

1. 编辑背景可以变换颜色，使用灰色的透明png的时候不知道看不清楚图标上有什么内容
2. 拖动图片的时候最好可以有一个辅助线

非常感谢好用的工具

@_400 不是小图标的 是合并图集 图集定位的

.img{background:url(../images/img.png) no-repeat ;background-size:@_105 $_3876;}
.icon-right@2x{height:@_22;width:@_14;background-position:0 0;}
.icon-down-active@2x{height:@_11;width:@_18;background-position:0 0 -@_23;}
.icon-down@2x{height:@_11;width:@_19;background-position:0 0 -@_35;}
.icon-red-check@2x{height:@_14;width:@_19;background-position:0 0 -@_47;}
.icon-right@3x{height:@_33;width:@_21;background-position:0 0 -@_62;}
.icon-chevron-down@2x{height:@_14;width:@_22;background-position:0 0 -@_96;}
.icon-address@2x{height:@_26;width:@_22;background-position:0 0 -@_111;}
.icon-order@2x{height:@_26;width:@_22;background-position:0 0 -@_138;}
.icon-arrows@2x{height:@_24;width:@_24;background-position:0 0 -@_165;}
.icon-dotted@2x{height:@_24;width:@_24;background-position:0 0 -@_190;}
.icon-crown@2x{height:@_24;width:@_24;background-position:0 0 -@_215;}
.icon-shearch01@2x{height:@_25;width:@_25;background-position:0 0 -@_240;}
.icon-close-red@2x{height:@_26;width:@_26;background-position:0 0 -@_266;}
.icon-m-close@2x{height:@_26;width:@_26;background-position:0 0 -@_293;}
.icon-down-active@3x{height:@_17;width:@_27;background-position:0 0 -@_320;}
.icon-shop@2x{height:@_28;width:@_28;background-position:0 0 -@_338;}
.icon-price@2x{height:@_28;width:@_28;background-position:0 0 -@_367;}
.icon-check02@2x{height:@_28;width:@_28;background-position:0 0 -@_396;}
.icon-checked02@2x{height:@_28;width:@_28;background-position:0 0 -@_425;}
.icom-close01@2x{height:@_28;width:@_28;background-position:0 0 -@_454;}
.icon-red-check@3x{height:@_21;width:@_29;background-position:0 0 -@_483;}
.icon-down@3x{height:@_17;width:@_29;background-position:0 0 -@_505;}
.icon-phone@2x{height:@_32;width:@_32;background-position:0 0 -@_523;}
.icon-chevron-down@3x{height:@_21;width:@_33;background-position:0 0 -@_556;}
.icon-address@3x{height:@_39;width:@_33;background-position:0 0 -@_578;}
.icon-order@3x{height:@_39;width:@_33;background-position:0 0 -@_618;}
.icon-close-top-big@2x{height:@_34;width:@_34;background-position:0 0 -@_658;}
.nav_button_Vertical@2x{height:@_36;width:@_36;background-position:0 0 -@_693;}
.icon-back@2x{height:@_36;width:@_36;background-position:0 0 -@_730;}
.icon-arrows@3x{height:@_36;width:@_36;background-position:0 0 -@_767;}
.nav_button_Horizontal@2x{height:@_36;width:@_36;background-position:0 0 -@_804;}
.icon-dotted@3x{height:@_36;width:@_36;background-position:0 0 -@_841;}
.icon-crown@3x{height:@_36;width:@_36;background-position:0 0 -@_878;}
.icon-back01@2x{height:@_36;width:@_37;background-position:0 0 -@_915;}
.icon-shearch01@3x{height:@_38;width:@_38;background-position:0 0 -@_952;}
.icon-close-red@3x{height:@_39;width:@_39;background-position:0 0 -@_991;}
.icon-m-close@3x{height:@_39;width:@_39;background-position:0 0 -@_1031;}
.icon-price@3x{height:@_42;width:@_42;background-position:0 0 -@_1071;}
.icon-shop@3x{height:@_42;width:@_42;background-position:0 0 -@_1114;}
.icom-close01@3x{height:@_42;width:@_42;background-position:0 0 -@_1157;}
.icon-checked02@3x{height:@_42;width:@_42;background-position:0 0 -@_1200;}
.nav-news@2x{height:@_42;width:@_42;background-position:0 0 -@_1243;}
.icon-check02@3x{height:@_42;width:@_42;background-position:0 0 -@_1286;}
.icon-add@2x{height:@_44;width:@_44;background-position:0 0 -@_1329;}
.icon-edit@2x{height:@_48;width:@_48;background-position:0 0 -@_1374;}
.icom-close-big@2x{height:@_48;width:@_48;background-position:0 0 -@_1423;}
.icon-delete@2x{height:@_48;width:@_48;background-position:0 0 -@_1472;}
.icon-phone@3x{height:@_48;width:@_48;background-position:0 0 -@_1521;}
.icon-edit-01@2x{height:@_48;width:@_48;background-position:0 0 -@_1570;}
.icon-close-top-big@3x{height:@_51;width:@_51;background-position:0 0 -@_1619;}
.icon-back@3x{height:@_54;width:@_54;background-position:0 0 -@_1671;}
.nav_button_Vertical@3x{height:@_54;width:@_54;background-position:0 0 -@_1726;}
.nav_button_Horizontal@3x{height:@_54;width:@_54;background-position:0 0 -@_1781;}
.icon-back01@3x{height:@_54;width:@_56;background-position:0 0 -@_1836;}
.icon-hot@2x{height:@_58;width:@_58;background-position:0 0 -@_1891;}
.nav-news@3x{height:@_63;width:@_63;background-position:0 0 -@_1950;}
.icon-add@3x{height:@_66;width:@_66;background-position:0 0 -@_2014;}
.QuickNavigation-active@2x{height:@_70;width:@_70;background-position:0 0 -@_2081;}
.QuickNavigation@2x{height:@_70;width:@_70;background-position:0 0 -@_2152;}
.icon-gotop-active@2x{height:@_70;width:@_70;background-position:0 0 -@_2223;}
.icon-nav-home@2x{height:@_70;width:@_70;background-position:0 0 -@_2294;}
.icon-nav-catergry@2x{height:@_70;width:@_70;background-position:0 0 -@_2365;}
.icon-nav-me@2x{height:@_70;width:@_70;background-position:0 0 -@_2436;}
.icon-gotop@2x{height:@_70;width:@_70;background-position:0 0 -@_2507;}
.icon-nav-shopcart@2x{height:@_70;width:@_70;background-position:0 0 -@_2578;}
.icon-edit-01@3x{height:@_72;width:@_72;background-position:0 0 -@_2649;}
.icon-edit@3x{height:@_72;width:@_72;background-position:0 0 -@_2722;}
.icom-close-big@3x{height:@_72;width:@_72;background-position:0 0 -@_2795;}
.icon-delete@3x{height:@_72;width:@_72;background-position:0 0 -@_2868;}
.icon-hot@3x{height:@_87;width:@_87;background-position:0 0 -@_2941;}
.QuickNavigation-active@3x{height:@_105;width:@_105;background-position:0 0 -@_3029;}
.QuickNavigation@3x{height:@_105;width:@_105;background-position:0 0 -@_3135;}
.icon-nav-home@3x{height:@_105;width:@_105;background-position:0 0 -@_3241;}
.icon-nav-me@3x{height:@_105;width:@_105;background-position:0 0 -@_3347;}
.icon-nav-shopcart@3x{height:@_105;width:@_105;background-position:0 0 -@_3453;}
.icon-gotop@3x{height:@_105;width:@_105;background-position:0 0 -@_3559;}
.icon-gotop-active@3x{height:@_105;width:@_105;background-position:0 0 -@_3665;}
.icon-nav-catergry@3x{height:@_105;width:@_105;background-position:0 0 -@_3771;}