java与python两个小人动图_CSS Sprite小图片自动合并工具（NodeJS,Python,Java,Ruby）

注* 基于Node.JS的图片合并工具还有一些，但大多依赖第三方图像处理库，此处略。

/*配置输出的大图片地址、排列方向，间隔等*/

/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

#web {

width: 17px; height: 17px;

background-repeat: no-repeat;

/*将web.gif添加到mysprite.png中， 只需要在后面添加 sprite-ref：sprite名 */

background-image: url(../img/web.gif); /** sprite-ref: mysprite; */

}

#logo {

width: 50px; height: 50px;

background-repeat: no-repeat;

background-position: top right;

background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */

}

输出

#web {

width: 17px; height: 17px;

background-repeat: no-repeat;

background-image: url('../img/mysprite.png');

background-position: left -0px;

}

#logo {

width: 50px; height: 50px;

background-repeat: no-repeat;

background-position: top right;

background-image: url('../img/mysprite.png');

background-position: right -17px;

}

此工具其实是将注释的那行 background-image 替换成了 background-image/ background-position。 因此如果小图标也是一个小的CSS Sprites图标组合的话也是支持的，不过需要将background-position写在上面，以便能让生成的background-position将其覆盖，设置sprint-margin 指定偏移多少，与之前的background-position要对应：

.icon-security{

background-position: 4px 2px;

background-repeat: no-repeat;

/*注意 sprite-margin-left： sprite-margin-top 用来指定小图片的偏移 */

background-image: url("../images/16x16/Keygif.png");   /** sprite-ref: mysprite; sprite-margin-left: 4px; sprite-margin-top: 2px; */

}

SmartSprites的定制能力还是比较强的，输出不依赖文件名，美中不足的是注释的方式并不能在Sass, Compass， Less等扩展CSS标记语言中使用。

使用：直接调用此命令可直接生成合并好的CSS文件：tool/smartsprites/lib是你安装smartsprites时那些jar所存放的目录

java -Xms64m -Xmx256m -Djava.ext.dirs=tool/smartsprites/lib org.carrot2.labs.smartsprites.SmartSprites web/css/icons.css

若设置正确则会生成一个 mysprite-sprite.css 的文件。 SmartSprites的最好好处可能就是能与ant/maven的无缝集成了。

$icons: sprite-map("icons/*.png"); //其中有一个 icons/new.png 小图标

background: sprite($icons, new) no-repeat;

会被压缩成

background: url('/images/icons.png?12345678') 0 -24px no-repeat;

使用Compass需要引入Ruby且无法直接在原生CSS文件中使用。

还有  sprite-factory　等这个是托管在gem上面的

Python  Glue

Glue是基于Python实现的一个CSS　Sprites切图自动生成工具。它生成的CSS小图标所对应的样式名以目录名+文件名组织：　如.sprite-icons-zoom_out　{　}

项目主页 https://github.com/jorgebastida/glue

安装 http://glue.readthedocs.org/en/latest/installation.html

Linux

$ apt-get install libjpeg62 libjpeg62-dev zlib1g-dev python-dev

$ sudo pip install glue

使用：

$ glue icons sprites

icons，sprites都是文件夹，生成的目录结构如下：

sprites

├── icons.css

└── icons.png

生成的CSS代码如下

.sprite-icons-zoom_out{ background:url('sprites/icons/icons.png'); top:0; left:0; no-repeat;}

.sprite-icons-zoom_in{ background:url('sprites/icons/icons.png'); top:0; left:-16; no-repeat;}

.sprite-icons-zoom{ background:url('sprites/icons/icons.png'); top:-16; left:0; no-repeat;}