诗歌rails之自动生成css sprite image

• JavaEye有多少种在线状态？
• 使用HTML＋CSS编写一个灵活的Tab页
• 对于ext中文的font-size大家是怎么解决的？
• css 简单使用1

推荐圈子: Vim编辑器
更多相关推荐

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只需要定义好图标组装的规则：

Java代码

1. forum_icon_vertical.gif:
2. sources:
3. - good_topic.gif
4. - mid_topic.gif
5. - unread_topic.gif
6. - sticky_topic.gif
7. orient: vertical
8. span: 5

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

然后执行一句

Java代码

1. rake css_sprite:build

rake css_sprite:build

看看生成的css sprite image

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

Java代码

1. .good_topic
2. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 0px
3. width: 20px
4. height: 19px
6. .mid_topic
7. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
8. width: 20px
9. height: 19px
11. .unread_topic
12. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px
13. width: 19px
14. height: 18px
16. .sticky_topic
17. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px
18. width: 19px
19. height: 18px

.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维护也方便多了