下面的周裕波相对谈得细一些，但针对CSS Sprite背景平铺来说，还是上文中介绍的那个基本原则了。看技术的发展吧。另外，友诺网认识到：PNG24和PNG8图像尺寸差距很大，PNG24格外细腻，适合表现一些阴影透明,但图片要比PNG8大多了。
周裕波：谈css sprites（背景图片整合）个人技巧
网页来源：http://www.webchina110.cn/?p=58
css sprites：我对他的中文理解是，将CSS中用到的背景图片进行整合，通过背景坐标定位（位移）的方式来实现背景的显示。
在这里，我们主要讨论的是关于背景整合的方法及在样式中具体使用方法：
一、背景整合：从事前端开发的你都应该非常清楚，我们在使用背景的时候一般情况下有四种平铺方式：平铺，横向平铺，纵向平铺与不平铺，正因为有这几种平铺 方法，所以我们在做背景整合的时候，也需要根据平铺方式不同，所整合的方法也就不同，很多人在最开始的时候，都以为是将用到的所有背景全部整合成一张图 片，这是不正确的认为，就算可以，但是在无形大大的增加了图片的大小。
1、完全平铺的背景：单独使用，像这种情况下一般情况很少，也就一到两张左右；
2、横向平铺
（1）有固定高度的：一般情况下，是宽1px的图片重复使用，所以我们可以做一张为宽1px，将这种情况的每张图片纵向排下来，至到排完为止，保存。
（2）高度无限增加，不固定：只能像完全平铺一样，单独使用。
3、纵向平铺
（1）有固定宽度的：一般情况下，是高1px的图片重复使用，所以我们可以做一张为高1px，将这种情况的每张图片横向排过去，至到排完为止，保存。
（2）宽度无限增加，不固定：只能像完全平铺一样，单独使用。
4、不平铺
（1）固定大小：这种情况可以不用过多考虑他们之间的间距，因为大小固定，不会将其他的图片内容过多的显示出来；
（2）不固定大小：这种情况下，我需要简单的描述一下，其实我对他的理解也还不够深刻，我可以举个简单的例子，比如我们经常看到的圆角，比如一个导航的左 边和右边都是圆角，中间可以平铺，但是如果我们将左边的圆角切下来，按照上面固定大小的方式不考虑太多，直接在图片的后面跟着一张图片，当我们在使用的时 候，就会出现一个问题，就是当内容过长的时候，其他地方就将出现后面的一些图片内容，我下面将举例说明。
但是我们会将不平铺的所有图片整合在一张图片上。弄我们使用，只是我们会考虑他们之间的一些间距。
上面我们说了关于背景整合的多种方式,我下面将分别举例说明，在说明之前，我将简单讲讲他的使用方法：
一、使用方法
在这里我使用了淘宝的网站为例子，他的背景图片地址如下：
/uploads/allimg/091106/1201164613-0.png
下面是淘宝的一个关于背景的定义：
- #site-nav, #site-nav .quick-link li, #site-nav .cart a, #site-nav .help a, .skin-yellow .rc-tp, .skin-yellow .rc-tp span, .skin-yellow .rc-bt, .skin-yellow .rc-bt span, .nav-box .bd, .nav-box .rc-tp, .nav-box .rc-tp span, .nav-box .rc-bt, .nav-box .rc-bt span, .select-search li, .select-search .selected a, .search-form, .nav-box dd li, .nav-box .news dt, li#MenuHome a, li#MenuHome a span, .mytaobao-entra {
- background:transparent url(http://assets.taobaocdn.com/app/fp/2009/hd_20090313.png) no-repeat scroll 0 0;
- }
上面是将所以需要此背景的图片的样式全部写在一起。
- .mytaobao-entra {
- background-position:-302px -59px;
- padding-right:16px;
- }
上面的就是通过坐标得到相应的背景图片，这里的这个样式是实现淘宝首页左上角我的淘宝链接旁边的那个向下的图标。
