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中浏览页面会出现北京图片溢出的情况。
Hmmm, I am tempted to try this.
能否给出一篇css spirit的教程或者应用了该技术的wp模板