CSS 图片拼合生成器

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>
 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值