CSS 图片拼合生成器在线 工具(已测试使用,基本满足网站对sprite的使用要求)
http://cn.spritegen.website-performance.org/
此在线工具提供源码下载(未进行测试使用)
使用步骤:
1. 将需要合成的图片 压缩 成zip 包
2. 上传图片
3. 点击生成拼图 & css
4. 复制 生成的的css与合成图片
5. 编写 html测试
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sprite-002{ background-position: 0 0; width: 119px; height: 74px; }
.sprite-004{ background-position: 0 -124px; width: 86px; height: 55px; }
.sprite-006{ background-position: 0 -229px; width: 79px; height: 57px; }
.sprite-008{ background-position: 0 -336px; width: 73px; height: 59px; }
.sprite-010{ background-position: 0 -445px; width: 81px; height: 58px; }
li {
background: url(csg-5091f11a7110b.png) no-repeat top left;
}
</style>
</head>
<body>
<li class="sprite-002"></li>
<li class="sprite-004"></li>
<li class="sprite-006"></li>
<li class="sprite-008"></li>
<li class="sprite-010"></li>
</body>
</html>