一、精灵图(sprites)
1、作用(优点)
当页面中有很多图片时,服务器就会频繁的接受和发送请求图片,造成服务器请求压力大,这将大大降低页面的加载速度。
故,为了**减少服务器发送和接受请求的次数,提高网页的加载速度。**使用 CSS 精灵图(雪碧图)
缺点:
- 图片文件大
- 放大和缩小失真
- 一旦图片完成更换会很复杂
2、使用
核心:
- 主要用在背景图,就是将许多小的图片放到一张大图片上,这样服务器只需要一次请求就可以。
- 移动背景图片,需要background-position,背景位置
- 移动的距离为 x,y轴,但是和数学坐标系有所不同。**往左走是负的,往上走是负的。**一般测量值都是负值。
- 使用精灵图需要精准测量。