自动生成css sprite image

css sprite技术可以有效地减少http请求的数量，也可以降低http传输数据的大小。

不过对于像我这样PS刚入门的人来说，要想把这些小图片优雅地组织在一起还是很有难度的，而且维护起来也不方便。所以只能用程序员的方法──写插件来解决了。

项目地址: http://github.com/flyerhzm/css_sprite

发现javaeye也没有使用css sprite哦，，所以就能javaeye做个例子吧，

在javaeye论坛页面有很多图标，每种图标都需要一个http请求，比如：good_topic.gif, mid_topic.gif, sticky_topic.gif, unread_topic.gif等等

使用css_sprite plugin/gem只需要定义好图标组装的规则：

forum_icon_vertical.gif:
  sources:
    - good_topic.gif
    - mid_topic.gif
    - unread_topic.gif
    - sticky_topic.gif
  orient: vertical
  span: 5

然后执行一句

rake css_sprite:build

看看生成的css sprite image

以及表示css sprite规则的css，tmp/css_sprite.css

.good_topic
  backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px
  width: 20px
  height: 19px

.mid_topic
  backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
  width: 20px
  height: 19px

.unread_topic
  backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px
  width: 19px
  height: 18px

.sticky_topic
  backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px
  width: 19px
  height: 18px

这样图标的css维护也方便多了

不错！顺便了解RMagick库。

不过那张合成的图片，前2个中间有白条。

白条是5个像素的span，背景白色所产生的，前两个星星的图标有淡蓝色背景

hoho，有点意思

不好意思，长久用sass，把css的语法都给忘了

生成的css文件应该是

.good_topic { 
	background: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px;
	width: 20px;
	height: 19px;
}
.mid_topic { 
	background: url('/images/forum_icon_vertical.gif') no-repeat 0px -24px;
	width: 20px;
	height: 19px;
}
.unread_topic { 
	background: url('/images/forum_icon_vertical.gif') no-repeat 0px -48px;
	width: 19px;
	height: 18px;
}
.sticky_topic { 
	background: url('/images/forum_icon_vertical.gif') no-repeat 0px -71px;
	width: 19px;
	height: 18px;
}