雪碧图 CSS sprite 优化性能

雪碧图 是利用css 的一种图片合成技术， 它使用的主要是background 和background-position 两个属性，调整背景图片的位置，在不同的地方显示不同的图片。

雪碧图最常应用于网页中的一系列图标，logo等，当一个页面中的图标数量很多时，我们可以考虑将所有图标合成一张大图片，即雪碧图，通过background-position调整可以显示这张大图片的不同部位。例如下面这张雪碧图，

（sprite.png,每个图标的宽是30px，高是24px）

下面的代码是应用雪碧图

<span style="white-space:pre">		</span>li i{
		<span style="white-space:pre">	</span>background: url(sprite.png);
		<span style="white-space:pre">	</span>display: inline;
		<span style="white-space:pre">	</span>width: 30px;
		<span style="white-space:pre">	</span>height: 24px;