何涛

 
搜索此站点

最近更新
技术文章‎ > ‎

CSS Sprite解决小图标问题

发布者：何涛，发布时间：2009-5-14 下午8:17   [ 更新时间：2009-5-14 下午8:28 ]
看看google首页，logo是 http://www.google.cn/images/nav_logo4.png




把所有小图片合在一起，用css去定位其它地方用到的图片

先定议一个csb的样式
<style>
.csb,.ss{background:url(/images/nav_logo4.png) no-repeat 0 0;height:26px;display:block}
</style>    
其它地方用的时候，根据位置去算出来。
<span class="csb" style="background-position:-26px 0;width:18px"></span>

这样做的好处有：
1.图标全在一起方便管理和控制
2.减少网络开销，和请求数，提高性能，这是最主要的。

这样的方式现在优酷也一直在用，我想会越来越流行的。

下面是收集的一些更多资料：

这个介绍很详细     
http://www.yeeyan.com/articles/view/oc/39032

http://www.a18zhizao.cn/y2009/850_transgenic-css-sprite-research-and-implementation-of-using.html