css，用一张大图片来设置背景的技术真相

    之前就知道了用一张图片来设置页面内的所有背景的技术。原理很简单，利用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图片来实现大容器中的小背景。