I Sparkle

Sparkle my ideas

CSS Sprite的优点

考虑写这篇文章是因为看到了FVzone的WP皮肤 dark-final :http://www.fvzone.com/blog/dark-final-to-wordpress.fv

这款皮肤很棒的,非常喜欢。

但是发现作者处理icon的方法有些原始:把那些小图标放到一个文件夹里,然后不同的class调用不同的ico图片。

如果用css spirit就可以省很多事情。

css spirit 的本质是通过定位调用某个图片的相应位置,也就是background:url(../images/icon2.png) mpx npx no-repet;m和n是相应的坐标。这样的话就可以把很多的小ico全部放到一个图片里面,这样有以下好处:

1、减少图片文件大小,经过测试,将多张图片集合可以将图片的总大小缩小好几倍。

2、减少数据请求,原来每加载一张小图,就会有一次数据请求,但是用了CSS spirit 使用该图片的所有class 只需要一次请求就够了

3、其它好处,比如减小CSS代码量,样式更容易管理等。

但是请注意,不要将repeat的图片和no-repeat的图片放到一起来,虽然这样基本不会有什么问题,但是目前来说,如果这样做的话,在Iphone中浏览页面会出现北京图片溢出的情况。

您或许会喜欢:

如果您喜欢本文,您可以对本文发表评论订阅本站 以获取本站最新动态。

2 个评论

  • Aland发表于 November 15, 2008 14:28 回复

    Hmmm, I am tempted to try this.

  • leges发表于 February 28, 2010 11:05 回复

    能否给出一篇css spirit的教程或者应用了该技术的wp模板

发表评论