之前就知道了用一张图片来设置页面内的所有背景的技术。原理很简单，利用background-potision精确地定位到图片的位置。好处是减少页面 的http请求数。

老实说，我并不觉得这个技术有多值得推广。虽然是减少了http请求数，但对于99%的网站来说，这个改进基本是看不见的。除了超一流的大网站，流量巨 大，减少http请求数可以看到效果，绝大多数的网站根本不需要这个技术。相较于它带来的几乎看不见的好处，它带来的坏处却很多。首先，要把所有小图片集 中到一张大图片上，这多了一个步骤，而图片之间的位置一旦定好很难进行改动，因为如果一旦要改动一个图片的位置，带来的是一系列图片位置的调整，整个页面 的背景可能会全部崩溃！！！是全部！！！也就是说，它的维护成本，还有适应性都非常地差！而图片之间的摆放，如何让页面内的小图标能最密集地排列从而让整 张图尺寸能尽可能地小也是要考虑的问题，很头疼。

再来讲讲技术实现上的难点。一个很关键的问题是，精确定位图片的位置并不算完，图片的平铺和容器的大小自适应才是一个让人很头疼的问题。也就是说，如果一 个容器的大小很大，而我们对这个容器设的背景很小，我们就要考虑到，如果这个容器大背景一定会平铺，会影响我们的效果。我们可以设置no-repeat来 禁止背景平铺，可是如果容器的大小大到超出了我们设置的最大值，会不会把旁边的图片拉过来接着做背景呢？一个解决方案是给每个自适应大小的容器，在放置背 景图的时候，尽量给背景图周围留下足够大的空白区。可是如此一来，小图片们就会很零散地聚在大图片中，和我们想要让“图片密集地集中在一块儿”的目的相违 背。

怎么办呢？今天看了一下应用这个技术的站点，发现原来他们用了一个1 * 1像素的透明gif图片！这是个很有趣的方法。如果一个大容器中需要一个小图片做背景，他们不会直接对大容器设背景，然后留大量空白，而是给那个1*1的 gif图片取个class或者id，用css控制它的大小和背景。这用得很巧妙。因为对于块级元素来说虽然可以定义大小和长宽，却是独占一行的，如果用 float来让它和其它行内元素呆在一行的话，还需要清除浮动等等，很麻烦。如果是行内元素，却又没办法设置长宽。很好用的inline-block却得 不到IE6的支持，为了兼容我们又不能对元素设置display:inline-block; 好在IE虽然不支持css设置display:inline-block;引擎里却还是对一些元素提供这样的样式支持，包括img,input和 table都是这样的元素。用1*1象素的gif来设置长宽和背景，这样一来，就可以实现display:inline-block了。

总结一下，技术真相是什么呢？就是利用1 * 1像素的透明gif图片来实现大容器中的小背景。