诗歌rails之自动生成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只需要定义好图标组装的规则：
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

然后执行一句
Java代码
  1. 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


这样图标的css维护也方便多了
posted @ 2009-10-09 15:34  麦飞  阅读(597)  评论(0)  编辑  收藏  举报