css sprites生成工具CSS Satyr 使用方法

CSS Satyr使用方法

1. 点击“文件” - “添加图片”，选择多幅图片文件；
2. 工作区内图片，可以拖动图片来调整位置；
3. 可以通过双击图片，来修改图片的相关信息；
4. 可以通过“设置” - “生成设置”来调整生成图片质量与文件名称；
5. 点“生成”，生成图片和网页文件；
6. 选中图片，按“delete”可以删除图片；

生成的合并图片和CSS代码：

 

CSS代码：

 

.shen_li {background-image: url("CSS Satyr.jpg"); display: block;}
.pic_4 {background-position: -0px -100px; width: 97px; height: 29px; }
.pic_4 {background-position: -0px -70px; width: 66px; height: 23px; }
.pic_1 {background-position: -75px -0px; width: 71px; height: 68px; }
.pic_4 {background-position: -0px -0px; width: 71px; height: 68px; }

调用效果

• image_41.gif
•  <span class="pic pic_4"> ... </span>

• 2013-09-25_10.gif
•  <span class="pic pic_4"> ... </span>

• image_53.png
•  <span class="pic pic_1"> ... </span>

• image_54.p

 

需要注意的是，CSS Satyr是基于 .NET 2.0 开发的，电脑需要安装 .NET 2.0 框架。如果你下载软件没办法使用，请自己安装.NET 2.0。