前端——background-position的使用

 在我们需要完成的很多界面中，需要用到很多的小的图形，例如QQ空间上的

这时如果把这些小的背景图一个一个加载的话，那么我们的网页加载速度会变慢很多，而且也不利于我们区分每一张图片，因此我们可以使用如下属性，将所有的图标都放在一张图上，同过position进行区分定位 ：

background-position : x y 

 例如：

我们的图片如下：

就可以使用如下代码： 

.bottom_middle{
	background-image: url(images/1.png);
	background-repeat:no-repeat;
	position: absolute;
	background-size: 632px 388px;
	width:24px;
	height:24px;
	background-position:-608px 0;    /*定位图片以图片左上角为起始坐标*/
}

这样我们就能加载同一张图片上的不同图标了。