诗歌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
  5. .mid_topic
  6. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 24px
  7. width: 20px
  8. height: 19px
  9. .unread_topic
  10. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 48px
  11. width: 19px
  12. height: 18px
  13. .sticky_topic
  14. backgound: url('/images/forum_icon_vertical.gif') no-repeat 0px 71px
  15. width: 19px
  16. height: 18px


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