雪碧图(CSS Sprites)是什么?
雪碧图就是将很多小图标放在一张图片上,就称为雪碧图 (也叫做精灵图)
雪碧图有什么用?
当一个前端页面上有许多固定位置的小图标时,每次访问这个页面。都需要从服务器上去发送请求获取图片资源,那么如果将这些图标都放在一个图里面,我们可以减少与服务器建立连接次数,提高页面加载速度。也是种前端性能的优化。
理解大法(可以略过直接进入使用步骤↓)
再讲解雪碧图的使用步骤之前,我们可以先了解下sprites图其实就是将一块大图(什么样的大图呢?就是多个小图合成在一起的大图)用来做背景图。
比喻一下使用雪碧图的整个过程(可能并不形象)
背景图就像是一块桌布(有着多种不规则图案的桌布)
使用方法是将其铺在桌子上,但是桌子上指定位置上具体展示的是哪块图案?
我们并不能预先知道。如果我们想要去控制某块区域展示这块桌布上的某个图案,我们可以拿一把剪刀,把图案剪下来,哪里需要贴哪里。
使用步骤
-
找到页面上的固定的图片(不会动态发生改变的图片)