backgroud 应用减小资源大小和请求数

一，一个典型的应用，利用小图的自动延伸，实现整个网页背景图，充分节约资源宽带。如：汽车之家的404页背景图就是这样

<div style="height: 3000px; background-repeat: no-repeat;background-image: url(1.jpg);"></div>
<div style="height: 3000px; background-repeat: repeat-x;background-image: url(1.jpg);"></div>
<div style="height: 3000px; background-repeat: repeat-y;background-image: url(1.jpg);"></div>
背景可以是颜色，静态 动态图片

二，另一个经典应用，将网站上用到的大量小logo图片，集成在一张大图上，通过ground-position-x 或y 来显示。这样可以节省网站的请求数。
 　　简写模式：
　　　　background-position: 10px 0; = ground-position-x: 10px;ground-position-y: 0;
　　　　background: url(1.jpg) 0 0 no-repeat; 等于以下组合
　　　　　　background-image: url(1.jpg);background-position-x: 0;background-position-y: 0;background-repeat: no-repeat;

<div style="background: url(1.jpg) 0 0 no-repeat;height: 1000px;"></div>

　　减少请求数：

<div style="background: url(bg.png) 0 0 no-repeat; height: 20px;width: 20px;"></div>
<div style="background: url(bg.png) 0 -20px no-repeat; height: 20px;width: 20px;"></div>
<div style="background: url(bg.png) 0 -40px no-repeat; height: 20px;width: 20px;"></div>
<div style="background: url(bg.png) 0 -60px no-repeat; height: 20px;width: 20px;"></div>

　　这样一张图实现了四个图标，一个请求数，就可以实现多个不同的资源的效果