CssGaga教程:AutoSprite(CSS Sprite Generator)

市面上有一些sprite生成器，要么是要人工调整图片位置，要么要拷贝粘贴代码，用起来总是觉得不够爽，CssGaga使用了不同的思路，希望能解放你的双手:) 使用时选中AutoSprite即可开启此功能，下面通过一个例子来说明： 比如HTML：

<s class="i1"></s><s class="i2"></s><s class="i3"></s><s class="i4"></s><s class="i5"></s><s class="i6"></s>

css源文件：

body{background-color:black;}
s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat;}
.i1{background-image:url(''slice/1.png'');}
.i2{background-image:url(''slice/2.png'');}
.i3{background-image:url(''slice/3.png'');}
.i4{width:64px;height:64px;background-image:url(''slice/4.png'');}
.i5{background-image:url(''slice/3.png'');}
.i6{width:64px;height:64px;background-image:url(''slice/6.gif'');}
.i11{width:60px;height:60px;background-image:url(''slice/1.jpg'');}
.i12{width:60px;height:60px;background-image:url(''slice/2.jpg'');}
.i13{width:60px;height:60px;background-image:url(''slice/3.jpg'');}
.i14{width:60px;height:60px;background-image:url(''slice/4.jpg'');}

CssGaga生成后：

body{background-color:black}
s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat}
.i1{background-image:url(sprite/style.png);background-position:-128px 0}
.i2{background-image:url(sprite/style.png);background-position:-128px -16px}
.i3{background-image:url(sprite/style.png);background-position:-128px -32px}
.i4{width:64px;height:64px;background-image:url(sprite/style.png);background-position:0 0}
.i5{background-image:url(sprite/style.png);background-position:-128px -32px}
.i6{width:64px;height:64px;background-image:url(sprite/style.png);background-position:-64px 0}
.i11{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:0 0}
.i12{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-60px 0}
.i13{width:60px;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!