CSS 图片拼合生成器

CSS 图片拼合生成器在线 工具(已测试使用,基本满足网站对sprite的使用要求)

 

http://cn.spritegen.website-performance.org/

 

此在线工具提供源码下载(未进行测试使用)

 

使用步骤:

1.  将需要合成的图片 压缩 成zip 包

 

2.  上传图片

     CSS 图片拼合生成器

 

 CSS 图片拼合生成器

3.   点击生成拼图 & css

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>
 

 

 

你可能感兴趣的:(css)