我们学习CSS的应用背景——CSSsprites。什么是精灵贴图？先来看一个案例——在这个页面上，使用了各种小图片。如何在页面中插入这些小图片呢？你的思维惯性必须通过使用img或者background-image来实现。想一想，如果页面上只有几张简单的图片素材，我们可以使用img元素导入图片，但是当网站上的图片太多的时候，一次引入一张图片就不方便了。最重要的是，每张图片的显示都是浏览器通过网络发送的。服务器收到请求后，通过互联网返回请求内容。如果一个页面上有上百张图片，哪怕是小图标，你都需要经历一次这个过程。毋庸置疑，整个页面加载速度较慢，因为请求网络资源过于频繁。此时，我们可以使用spritemap技术来解决这个问题！雪碧图，又称精灵图、怪兽图，是基于将页面上使用的各种图像分类并整齐地放置在背景透明的图片上的基本原理。图片的引入是通过CSS后台技术实现的，从而减少服务器发送和接收请求的次数，提高页面加载速度。比如页面中有一个元素，使用background-image方法插入一张sprite图片。默认背景图片左上角的字母“a”显示在元素内部。如果要在元素中显示字母O，需要使用background-position属性来调整背景图片的位置。在ps软件中打开精灵图（ps.gaoding.com），使用圆圈选择工具，从图片的左上角测量到字母“O”的左上角，测量距离为：水平390px，垂直105像素。因为背景图片需要整体移动到左上角，所以background-position的值在两个方向上都是负值：分别为-390px和-105px。此时，字母o已经显示在元素内部。如果位置测量有偏差，可以在浏览器的开发者工具中找到页面元素，选择属性值，按键盘上下箭头，微调属性值。位置调整满意后，根据这个值修改样式。你可能会问，精灵图是前端工程师做的吗？其实在团队的网站开发中，UI设计师会为我们准备好网页需要的各种图片，我们可以直接使用。接下来，我们将利用sprite图技术完成“千峰”拼音首字母的显示。创建014-sprites文件夹，在文件夹下创建sprites.html和sprites-style.css文件，打开html，构建基础代码，导入外部样式。使用emmet命令：div.box$*2快速创建两个带有类名的div元素。HTML
