关注前端开发
HTML5、CSS3、Javascript

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图片来实现大容器中的小背景。

转载请注明出处大前端 » css用一张大图片来设置背景的技术真相

分享: