css用一张大图片来设置背景优缺点 实现方法

实现方法：

将页面的所有需要表现的网页背景图片集成在一张图片上，通过css background-position：x, y 来设置某个位置具体显示的背景图片。

优点：

减少了http请求数，网页加载会快些

缺点：

维护比较困难 自适应比较难

如果一 个容器的大小很大，而我们对这个容器设的背景很小，我们就要考虑到，如果这个容器大背景一定会平铺，会影响我们的效果。

4000

解决措施：

给每个自适应大小的容器，在放置背景图的时候，尽量给背景图周围留下足够大的空白区。

用一个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了。