持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
认识精灵图CSS Sprite
1.什么是CSS Sprite
是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
有人翻译为:CSS雪碧、CSS精灵
2.使用CSS Sprite的好处
减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名
3.Sprite图片制作（雪碧图、精灵图)
方法1: Photoshop，设计人员提供
方法2: www.toptal.com/developers/…
4.精灵图的使用
精灵图如何使用呢?
精灵图的原理是通过只显示图片的很小一部分来展示的;
通常使用背景:
√ 1.设置对应元素的宽度和高度
√ 2.设置精灵图作为背景图片
√ 3.调整背景图片的位置来展示
如何获取精灵图的位置
cursor
最近在项目中，碰到这样一个问题，设置了一个div盒子，点击盒子会触发事件，弹出一个弹框。但是在鼠标移到这个盒子的时候，鼠标的箭头并没有变成一只手的形状，经过查阅资料发现elementUI的按钮，或者给div盒子设置一个路由跳转，跳转到另一个页面这两种方式，鼠标才会变成一只手，最后才得知css里面有一个这样的属性设置后就生效了。
cursor可以设置鼠标指针(光标)在元素上面时的显示样式
cursor常见的设值
auto:浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
default:由操作系统决定，一般就是一个小箭头
pointer:一只小手，鼠标指针挪动到链接上面默认就是这个样式
text:一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
none:没有任何指针显示在元素上面
