CSS Sprites（CSS雪碧图）利用background-position从大图中扣出小图

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

CSS 雪碧图技术不是什么新东西，在网页应用中已经有几年了，现在的网页开发在图标图片的应用上已经趋向于使用字体图标，这是一种比CSS雪碧图技术更优雅的图标应用方式。

比如：

CSS知识点：

• • background-image
  • backgorund-position
• 特点：
  
  1. 相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
  2. 一般情况下，你需要保存为PNG-24的文件格式。
  3. 可以设计出丰富多彩的颜色体表。

<span style="color:#444444;">.toolbar{
	right:10px;
	bottom:10px;
	</span><span style="color:#ff0000;">position:fixed;</span><span style="color:#444444;">
}
.blog{
	</span><span style="color:#ff0000;">background-position: 0 -798px;
	&:hover{
		background-position: 0 -860px;
	}</span><span style="color:#444444;">
}
.feedback{
	background-position: 0 -426px;
	&:hover{
		background-position: 0 -488px;
	}
}
.app{
	background-position: 0 -550px;
	&:hover{
		background-position: 0 -612px;
	}
}
.top{
	background-position: 0 -674px;
	&:hover{
		background-position: 0 -736px;
	}
}
.toolbar-item{
	</span><span style="color:#ff0000;">display: block;
	width: 52px;
	height: 52px;
	background-image: url(../img/toolbar.png);
	background-repeat: no-repeat;</span><span style="color:#444444;">
	margin-top: 1px;
}
</span>

必须先确定长 宽 背景的整张图片 不重复

        display: block;
	width: 52px;
	height: 52px;
	background-image: url(../img/toolbar.png);
	background-repeat: no-repeat;

利用background-position属性  它有两个参数，分别是水平方向移动的像素、竖直方向移动的像素，都用 负数表示 。大图不动，div移动，也只能是向右、向下移动，只要记住这两个方向移动的像素都用负数表示就行了！

.blog{
	background-position: 0 -798px;
	&:hover{
		background-position: 0 -860px;
	}
}

至于像素是多少 我用的是PS 放大图片 用标尺+参考线来看像素（将标尺单位改为像素即可）