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

CSS Satyr使用方法

点击“文件” - “添加图片”，选择多幅图片文件；
工作区内图片，可以拖动图片来调整位置；
可以通过双击图片，来修改图片的相关信息；
可以通过“设置” - “生成设置”来调整生成图片质量与文件名称；
点“生成”，生成图片和网页文件；
选中图片，按“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
...

2013-09-25_10.gif
...

image_53.png
...

image_54.p

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

css sprites生成工具CSS Satyr 使用方法相关推荐

CSS Satyr v1.2(CSS Sprites生成工具)
CSS Satyr(CSS 塞特斯)是一款 CSS Sprites 的小工具.可以将多个小图片整合成一张图片,并生成相应的CSS调用代码.CSS Sprites 样式生成工具也很不错,但是它只对一整幅 ...
解释css sprites 如何使用.,css sprites如何使用？
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
css sprint 生成工具 bg2css
今天需要改个css sprint,之前使用过一个工具蛮好使,但是就是想不起叫什么名字,网上搜了很久,才再次找到,原来是bg2css,今天记录下,以备以后不时之需. 下载地址:http://www.cs ...
CSS Sprites 样式生成工具
CSS 图片拼合生成器 http://cn.spritegen.website-performance.org/ Css背景图合并工具功能增强(附V0.11源码和可执行文件) http://www.c ...
CSS Sprites定位实现
何为CSS Sprites 通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做"CSS贴图定位". 原理 CSS Sprites 原理:其实就是把网页中一些 ...
css 在线生成器,CSS Sprites在线生成器
一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点.跟版模板网在 ...
CSS Sprites（CSS精灵）技术及其优化经验分享
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...
html中sprite标签,网页切图 CSS Sprites（CSS精灵）介绍和图文使用教程
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...
html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...

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

调用效果

css sprites生成工具CSS Satyr 使用方法相关推荐

最新文章

热门文章