精灵图像技术 精灵图像技术

1.为什么需要精灵图?

过多背景图像影响页面加载速度

CSS精灵技术优化页面加载

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。

精灵技术目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度

2.精灵图的使用

使用精灵图核心：

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

2.这个大图片也称为sprites精灵图或者雪碧图

3.移动背景图片位置,此时可以使用 background-position.

4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。

5.因为一般情况下都是往上往左移动,所以数值是负值。