何为" css sprites " ？何以为之酷？如何使用之？

何为” css sprites ” ？

css sprites是一种使用一个图片文件在网页展示多图片的技术。

css sprites的原理是，一旦得到一个图片文件，只需要稍微移动该文件和展示该文件的部分内容。

为何要使用 ” css sprites ” ?

举例说明：

Image	File Size	Dimensions
Canada.png	1.95KB	256x128
usa.png	3.74KB	256 x 135
mexico.png	8.69KB	256 x 147

可以看出加载这三张图片，总共需要14.38KB的流量。把这三张图片置于一个16.1KB的单个图片文件 ，感觉和这三张图片加起来差别不大，但是可以减少HTTP请求，减轻服务器压力

如何使用 ” css sprites ” ?

同样使用上面那个例子，

你可以建立一个包含多个css类的css文件，命名为background-image ，每个css类只是设置背景图片的位置并展示，以下为源码：

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}