smartsprites 中文指南 (上)

 

本文讲讲生成图片和css的工具,一般使用css sprite的方式有两种:

1,单纯的背景图方式,这种方式没有多余的标签,并且比较简单,缺点是IE6 半透明png没办法对付.

2,另一种是两个标签的方式,外层一个div,定大小,内层一个img(或者div),img和图片一样大,relative定位,然后设置img的top和left来定位,这种方式的好处是可以对付IE6的png问题.内层img可以应用滤镜,不过也多了一个标签,并且不支持背景平铺, 如果背景平铺的话用滤镜是无解的,smartsprites的方式是为IE6生成png8.,可以支持背景平铺

 

找了几个生成sprite image的工具都不是很满意,只能把图片合并起来,然后给出图片位置.

大部分人设置sprite的方式是,用background-position的方式设置图片位置,如果此图前面的图片大小改变了,后面全得改动,维护很不方便,俺的想法是:有一个工具,我们只要按照一种方式写css,这个工具可以遍历生成图片和那些css,这样维护起来方便一些,总算找到了这么一个工具,老外用java写的,名字叫做smartsprites,对于IE6的png问题,他的解决方法是Png8,对于一般的网页图片来说,png8和24相差不是很大,png8在IE6下还是有问题,只能全透明,半透明不生效,这种方式也支持背景图平铺,下面介绍一下这个工具:

SmartSprites

从以下地址可以看到她的信息:

http://csssprites.org/

 

小弟虽然e文不好,但还是尽力为大家讲解一下使用方法,多多包涵.

最快速的上手方法: 1: 下载 http://csssprites.org/download.html?v0.2.4 ,

2, 照着readme.txt 的说明运行 smartsprites --root-dir-path test/real-world-example 即可看到效果,( 在css 目录下面生成了新的css 文件, 图片文件夹下面也生成了合并后的sprites 图片), 这个示例页面并不兼容IE6,( 看样子老外要抛弃IE6 了, 呵呵)

 

翻译by: 天堂左我往右

 

什么是 SmartSprites?

  SmartSprites 可以让你容易的使用 css sprites, 并且容易维护 ,

你可以在 css 文件中插入一些标记和指令 , 来指示某些图片是否放入 css sprites 图片里 , SmartSprites 会解析你的 css 文件去自动生成合成图 , 并且生成需要的样式 .

也就是说,当css图片改变的时候,你不再需要沉闷的复制粘贴那些css了,只需要像平时那样切图和写css,然后由smartsprites自动生成一下就ok.

 

smartsprites的其它特点:

 

(new!)支持gif和png8/24: smartsprites能创建sprites,同时支持gif和png8/24格式,包括透明,此外,还可以优化输出的png图,只有在需要png24的时候才会输出png24.

 

x- and y-repeated,纵向和横向平铺的图: 支持

 

Right and bottom image position: 支持背景图Right bottom方式定位

 

水平和垂直的sprites: smartsprites可以同时创建 水平和垂直布局的sprites,以支持 纵向和横向平铺,以及right和bottom定位的背景.

 

自定义的sprite边距:用smartsprites,你可以自定义每个sprite的left,top,bottom,right边距.

 

多个sprite图片和css文件:smartsprites可以一次处理多个css文件并且生成多个不同的sprites(例如:一个垂直的sprites做icons,另一个水平的做tabs)

 

(!new) 专门对于IE6的支持:smartsprites可以生成对IE6友好的png8并且在需要的时候保留透明度,可选的,对每个指定的sprite设置matte color(译者注:matte color是啥意思,小弟不知道...,麻烦哪位仁兄指点一下.另外:png8在IE6下半透明会变成全透明,smartsprites不支持IE6的png半透明...)

 

(!new) CSS- and document-root-relative image paths :可以指定个别的图片和 生成的sprites 相对于css文件或者是in an absolute fashion(译者注:此处不会翻译,望指点),相对于提供的文档根目录

 

用ant轻松生成: Transparent processing is the driving force behind SmartSprites(译者注:不大明白,反正这段说的是可以用一个Ant任务来自动执行), 使用一个专用的Ant任务,可以用一个自动脚本轻松的合成

 

开源协议采用 BSD License :你可以使用和改进smartsprites,  无论是开源项目还是商业项目

 

使用smartsprites

 

1,准备好css,html和图片,使用background-image来链接图片,你可能会根据以下的方式来结束一个css 样式

#web {

    width: 17px;

    height: 17px;

    background-repeat: no-repeat;

    background-image: url(../img/web.gif);

}

#logo {

    width: 50px;

    height: 50px;

    background-repeat: no-repeat;

    background-position: top right;

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

}

#main-box {

    background-repeat: repeat-x;

    background-position: 5px left;

    background-image: url(../img/top-frame.gif);

}

确定文件是有缩进的 , 你就可以添加 smartsprites 的指令了

 

2, 用 smartsprites 的指令注释 css 文件

 

smartsprites 的注释指令必须放入 /** 和 */ 之间 (css 注释 ), 对浏览器是透明的 , 接下来为原始的 css 文件加入注释 , 指令跟随在 property: value 之后 , 加入指令之后 , 原始的 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/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 */

}

#main-box {

    background-repeat: repeat-x;

    background-position: 5px left;

    background-image: url(../img/top-frame.gif); /** sprite-ref: mysprite; sprite-alignment: repeat;  sprite-margin-top: 5px */

}

第一条指令 ( 红色的 ) 指定了一个名字叫 mysprite 的 sprite, 她将保存在 '../img/mysprite.png ' 相对于 css 文件的目录下 , 这个 sprite 的 images 将垂直布局 ( 一个在另一个之上 )

对于 #web 规则,smartsprites 将把 ../img/web.gif 添加入 mysprite 的 sprite 中 , smartsprites 将会用指定的 sprite 替换 css 属性 .

#logo 规则 的指令告诉 smartsprites 将图片 ../img/logo.png 放入相同的 sprite, 并且 right 定位 , 这样 , 这个图片将会在 sprite 的右边 .

最后 ,#main-box 的指令告诉 smartsprites 平铺这个图片 , 这个图片将会横向填满整个 sprite, 另外 ,smartsprites 将会偏移从下边缘开始临近的图片 5px, 以便 background-position: 5px top 生效

 

下面是 smartsprites 指令的详细说明 , 也许你会觉得比较沉闷 , 但是他会让你能使用 smartsprites 的全部强大功能 , 这里有两种类型的 smartsprites 指令 :

a:   Sprite Image 指令 , 以红色 标记 , 它定义了一个 sprite image, 由小图片生成 ,Sprite image 定义以   /** 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 文件 ,SmartSprites 将根据后缀推断出图片格式 , 支持 gif, png and jpg

       Sprite image layout , 语法为 : sprite-layout: vertical | horizontal , 非必须属性 , 默认值 :horizontal, 指定图片是水平还是垂直 ,

       Matte color ,syntax: sprite-matte-color: #ff8822 , 非必须属性 , 默认值 :#ffffff. 如果把图片保存为 gif 或者 png8 格式的时候 , 可以使用 matte color 来指定渲染透明的部分 .

注意 : 目前只支持 6 位的 16 进制色别编码 , 也可以参见 PNG color depth 和 IE6-friendly PNG 项

( 译者注 : Matte color 翻译的不是很好 … 抱歉 )

       IE6 compatibility mode , 语法为 : sprite-ie6-mode: auto | none , 可选项 , 默认值 :auto, 指定生成 sprite image 的时候是否兼容 IE6(auto: 必要的时候创建 IE6 兼容的 ,none: 永远不 ), 更多详细细节请参见 IE6-friendly PNG ,.

       Sprite UID generation, 语法为 : sprite-image-uid: none | md5 | date , 可选项 , 默认值 :none, 指定一个标识符跟在 css 中的 img 的 url 后面 , 防止更新图片以后仍旧从浏览器缓存中加载图片 ( Expires headers . 太久 ), 支持以下的 UID 类型 :

              None: image url 后面什么都不跟 , 默认值

              Md5: 跟随杂乱的 md5码 , 每次图片有变动的时候生成不同的值

              Date: 生成图片的时候生成一个时间戳,每次 SmartSprites 运行的时候都会生成 , 不管图片有没有改动过 .

       Uids 跟在图片 url 问号之后 , 例如 :

background-image: url('../img/logo.png?d41d8cd98f00b204e9800998ecf8427e')

 

 

b: Sprite 引用指令 , 以橘色 标记 , 用来告诉 SmartSprites 指定的背景图片应该放入指定的 sprite image,, sprite 引用指令必须在一行内 ,  css 的 background-image 属性指定图片的相对路径 ( 绝对路径不行 ),css 注释以 /** sprite-ref: 开始 ,sprite 引用指令指定如下的属性 :

Sprite Reference, 语法为 :   sprite-ref: sprite-id , 必选项 , 引用一个被 sprite image 申明过的 sprite, 指定的图片将依靠这个申明放入对应的 sprite image 里面

 

Sprite Alignment, 语法为 : sprite-alignment: left | right | top | bottom | repeat; 可选项 , 默认值 :left, 垂直布局中居左 ,top, 水平布局中居顶 , 定义指定图片对于 sprite image 的边缘对齐 . 对于垂直对齐的 sprites, 允许的值是 left 和 right , 同理 , 水平是 top 和 bottom , Sprite alignment 属性什么时候会用上呢 ? 答案是 , background image 定位使用了 right 或者 bottom, ( 例如 : background-position: top right ).

 

一个指定的调整值是 repeat 如果指定 , 则指定的图片将水平或者垂直穿过整个 sprite, 这样你就可以指定 css 属性 background-repeat 为 repeat-x 或者 repeat-y 了 .

 

Warning, 如果单个图片指定了 repeat 属性 , 则生成的 sprite 大小最小为这些图片的大小的最小公倍数 , 例如 : 如果有几张图片指定为 ” repeated”, 他们的宽 ( 高 ) 为 3px,5px,7px,11px; 则生成的 sprite 的 width(height) 为 1115px, 因此 , 使用 sprite-alignment: repeat 的时候要谨慎 .

 

Sprite margins , 语法为 : sprite-margin-(left | right | top | bottom): OFFSETpx ,, 可选项 , 默认值 :0px, 指定图片和周围图片或者和 sprite 边的距离 , 当原始图片没有放置在盒子的边上时 , 这个属性可能会有用 . 示例 : background-position: 5px left, 注意 : 只 允许像素值 , Shorthand version of margins property known from CSS is not yet supported here.( 不支持 css 中的 margin 简写版本 )

 

小结 : 当我们用 SmartSprites 指令注释完 css 文件之后 , 你就可以用 SmartSprites 生成 sprite images, 修改你的 css 文件 , 在做之前 , 你需要安装 SmartSprites 依赖的一些软件和 SmartSprites 自身 .

 

 

3.    获得 SmartSprites 和 需要的软件

 

a.   下载并且安装 jdk1.5 以上版本 .( 推荐 JDK 6 )

b.   Download SmartSprites 或者 从资源库中签出最后的版本

Svn co https://carrot2.svn.sourceforge.net/svnroot/carrot2/labs/smartsprites

现在就可以真正的运行 SmartSprites 了

( 译者注: svn 签出的需要自己编译一下,Download 可以直接运行 : http://csssprites.org/download.html?v0.2.4)

 

4.    运行 SmartSprites

a.    Windows 系统下 :

smartsprites --root-dir-path c:/example

 

Linux 系统下 :

./smartsprites.sh --root-dir-path /home/user/example

 

b. 运行完毕以后你可以看到屏幕上有类似的输出信息:

process:

[java] INFO: Reading image from: C:\example\img\web.gif

[java] INFO: Reading image from: C:\example\img\logo.png

[java] INFO: Reading image from: C:\example\img\top-frame.gif

[java] INFO: Creating sprite image of size 48 x 75 for mysprite

[java] INFO: Creating CSS style sheet: C:\example\css\style-sprite.css [java]

SmartSprites processing completed in 328 ms

 

如果你发现输出的行有 warning(WARN: ), 请仔细阅读并且纠正错误 , 否则 , 你设计的东西看起来会和原始的版本不同 .

 

在成功完成之后 , SmartSprites 会在指定的位置上创建 所有的 sprite images( 根据 sprite image 指令 ), 并且 , 会对每个 css 文件进行处理 , SmartSprites 将会创建一个相同的 css 文件 , 后缀增加 –sprite. 原始的 css 文件保持不变 . 切换你的设计到 css sprites, 将 html 中的原始 css 文件替换成生成的这些即可 ( 后缀为 –sprite 的 css)