SmartSprites 可以让你很容易的使用 css sprites, 并且容易维护, 你可以在 css 文件中插入一些标记和指令, 来指示某些图片是否放入 css sprites 图片里, SmartSprites 会解析你的css 文件去自动生成合成图, 并且生成需要的样式. 如果图片有修改,只需执行一下命令,新的sprite就又生成了。这样就可以大大的提高开发效率,维护起来也比较方便。
快速引导:
1. 下载并且安装 jdk1.5 以上版本。
2. 下载SmartSprites http://csssprites.org/download.html?v0.2.6 并解压到任意目录下。
3. 修改smartsprites.cmd文件,找到java %OPTS% -Djava.ext.dirs = lib org.carrot2.labs.smartsprites.SmartSprites 这行,将lib替换成该目录下lib文件夹的绝对路径。
4. 配置环境变量,path后边追加smartsprites的绝对路径;如:d:/smartsprites-0.2.8
5. 编写需要的css文件,如:style.css
#web {
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url(../img/icon1.png);
}
#logo {
width: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url(../img/icon2.png);
}
#main-box {
background-repeat: repeat-x;
background-position: 5px left;
background-image: url(../img/icon3.png);
}
6. 用 smartsprites 的指令注释 css 文件
/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
#web {
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url(../img/icon1.png); /** sprite-ref: mysprite; */
}
#logo {
width: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url(../img/icon2.png); /** sprite-ref: mysprite; sprite-alignment: right */
}
#main-box {
background-repeat: repeat-x;
background-position: 5px left;
background-image: url(../img/icon3.png); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */
}
7. 打开cmd命令行窗口,键入smartsprites d:/example/style.css。
在成功完成之后,SmartSprites 会根据 sprite 指令在指定的位置上创建合并好的图片,
同时创建一个相应的 css 文件,后缀增加 -sprite,原始的 css 文件保持不变。
style-sprite.css :
#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;
}
#main-box {
background-repeat: repeat-x;
background-position: 5px left;
background-image: url('../img/mysprite.png');
background-position: left -64px;
}
8. 将 html 中的原始 css 文件替换成新的,如:style.css -> style-sprite.css。
SmartSprites 指令剖析
Sprite Image 指令
上面第6步中红颜色的标记,定义以/** sprite: 开头,必须在单独的一行,一个css文件可以包含多个sprite image 指令。sprite image 指令包含如下属性:
Sprite ID 语法为 :sprite:unique-id, 必须属性, 指定 sprite image 一个唯一的标识符以便引用 , 每个唯一的 sprite id,SmartSprites 将会创建一个 sprite image。
Sprite image location 语法为:sprite-image:url( 'path/name.(png | gif | jpg)' ),必须属性, 生成sprite image相对于css文件的位置(写绝对路径也可以), 图片格式支持 gif, png and jpg。在该sprite image的url里面可以包含一些变量${ variable},这里面的variable可以是sprite (Sprite ID),md5或者date。你可以把这些变量放在url的任何位置,比如:
sprite-image: url('../img/logo-
${md5}.png')
sprite-image: url('../
${date}/
${sprite}.png')
sprite-image: url('../sprite.png?
${md5}')
Sprite image layout 语法为:sprite-layout:vertical | horizontal,非必须属性,指定图片是水平还是垂直,默认值为horizontal。
Matte color语法为:sprite-matte-color: #ff8822,非必须属性,默认值:#ffffff. 如果把图片保存为 gif 或者 png8 格式的时候, 可以使用 matte color 来指定渲染透明的部分。
Sprite 引用指令
以蓝色标记, 用来告诉 SmartSprites 指定的背景图片应该放入哪个 sprite image,sprite 引用指令必须和css 的 background-image 属性在一行内, background-image 属性指定图片的相对路径 (绝对路径不行)。引用指令以 /** sprite-ref: 开始,包含如下属性:
Sprite Reference,语法为:sprite-ref: sprite-id,必选项,引用一个声明过的sprite, 指定的图片将依靠这个申明放入对应的 sprite image 里面。
Sprite Alignment, 语法为:sprite-alignment: left | right | top | bottom | repeat;非必须属性,垂直布局时默认值为left,水平布局时默认值为top, 定义指定图片对于 sprite image 的边缘对齐方式。对于垂直对齐的 sprites,允许的值是 left 和 right,同理,水平的是 top 和 bottom。当图片需要平铺时,则使用repeat。
Sprite margins , 语法为:sprite-margin-(left | right | top | bottom): OFFSETp,非必须属性,默认值为0px, 指定图片和周围图片或者和 sprite 边的距离,当原始图片没有放置在盒子的边上时,这个属性可能会有用。示例:background-position: 5px left,注意:只允许像素值,并且margin不能缩写。
注意事项和好的建议
1. 在使用SmartSprite之前不要使用CSS Sprite。
2. 把background属性分写成background-image,background-repeat……
3. 将需要平铺的图片在平铺方向切得尽可能小。
4. 尽可能让你的背景图片覆盖到整个元素,不要只是他的一部分。
5. 需要水平(垂直)平铺的图片必须添加在垂直(水平)布局的Sprite中。
6. background-image 后面不能再有 background-image 或 background-postion属性,否则新的规则将会被他们覆盖。
7. Sprite引用指令必须和“background-image:url(xxx.jpg);”在一行内,即(中间不能有回车)。
8. sprite-margin-* 的值不能为负数。
9. sprite-margin-*的值只能以“px”为单位。
10. “/**”后边要有一个空格。(很变态,这个问题很容易被忽略,且不易被发现)
11. 只接受 jpg、png 和 gif 格式的图片。
12. 所有的属性中的“sprite”,都不要写成复数形式“sprites”。
SmartSprites 运行的方法
目前我只会三种运行方法:
1. smartsprites d:/example/example.css
直接编译example.css文件(这里貌似不应该叫做编译,但是为了方便我表达我就这么叫了)。
2. smartsprites --root-dir-path d:/example
以 d:/example 为根目录,编译 d:/example 下面的所有css文件。
3. Smartsprites d:/example/example.css --document-root-dir-path d:/root
编译 example.css ,把生成的sprite image 和新的css文件输出到d:/root 目录下。
4.Smartsprites 对ie6 下的半透明图片也有很好的支持,smartsprites d:/example/example.css --sprite-png-ie6
这样可以生成两张图片,mysprite.png 和 mysprite-ie6.png
css变为
style-sprite.css :
#web {
//ie6 hack
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url('../img/mysprite.png');
-background-image: url('../img/mysprite-ie6.png'); background-position: left -0px;
//ie6 hack
}
#logo {
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-position: top right;
background-image: url('../img/mysprite.png');
-background-image: url('../img/mysprite-ie6.png'); background-position: right -17px;
}
#main-box {
background-repeat: repeat-x;
background-position: 5px left;
background-image: url('../img/mysprite.png');
-background-image: url('../img/mysprite-ie6.png');
//ie6 hack background-position: left -64px;
}
5.自定义新css的后缀名 smartsprites d:/example/example.css --css-file-suffix -ooxx
产生新的css为 style-ooxx.css
SmartSprite 官网:http://csssprites.org/