css图像精灵

在加载网页时，浏览器只会加载当前页面下所需的资源。

以设置一个按钮为例：

<style type="text/css">
	.btn:link{
		display: block;
		width: 30px;
		height: 30px;
		background-image: url(img/1.png);//加载静态时的图片
		background-repeat: no-repeat;
	}
	.btn:hover{
		background-image: url(img/2.png);//加载光标悬停时的图片
	}
	.btn:active{
		background-image: url(img/3.png);//加载激活后的图片
	}
</style>

按钮处于静态时，按钮样式为背景图片1（浏览器第一次加载）：

移动鼠标至按钮时处于hover状态，样式为背景图片2（浏览器第二次加载）：

按下按钮时处于active状态，样式为背景图片3（浏览器第三次加载）：

而hover状态下的资源，则会在激活时浏览器再次向后台发出申请后加载，这样不仅浪费了浏览器的缓存能力，再次加载资源所需的时间也将带给用户不好的体验。

因此我们可以采用css图像精灵，将所需图片资源进行整合成为一张图：

在需要相应资源时，通过移动图片的方式显示需要的内容；最重要的是加载所有的图片资源只需要向服务器发送一次请求，不仅能充分利用浏览器的缓存能力，还大幅提高了用户体验：

<style type="text/css">
	.btn:link{
		display: block;
		width: 30px;
		height: 30px;
		background-image: url(img/4.png);//加载雪碧图
		background-repeat: no-repeat;
	}
	.btn:hover{
		background-position: -30px 0px;//移动位置以表现鼠标悬停样式
	}
	.btn:active{
		background-position: -60px 0px;//移动位置以表现点击激活样式
	}
</style>

需要注意的是，使用雪碧图需要准确计算移动图片位置时的像素值。