共计 1776 个字符，预计需要花费 5 分钟才能阅读完成。
咱们学习 CSS 背景的利用——CSS 精灵图。
什么是精灵图呢？先来看一个案例——在这个页面中，应用到了各种各样的小图片。
如何在页面中插入这些小图片呢？你的思维惯性，肯定是利用 img 或者 background-image 来实现。大家思考一下，如果页面中只有几个简略的图片素材，咱们能够采纳 img 元素来引入图片，可是当网站图片过多的时候，一张图片一张图片的引入，就显得不不便了。
最重要的是，每张图片的显示，都是由浏览器发送申请，通过互联网，服务器接管到申请后，再通过互联网，返回申请内容。如果一个页面里有上百张图片，哪怕是很小的图标，都须要经验一次这样的过程。毋庸置疑，因为申请网络资源过于频繁，整个页面的加载速度就会变慢。
此时，咱们就能够应用精灵图技术来解决这个问题了！
精灵图，也称雪碧图、妖怪图，基本原理就是将页面中应用到的各种图片进行分类，整齐划一的摆在一张背景通明的图片下面，通过 CSS 的背景技术实现图片的引入，从而缩小服务器发送和接管申请的次数，进步页面的加载速度。
例如，页面中有一个元素，应用 background-image 的办法，插入一张精灵图。
默认背景图片的左上角字母“a”显示在元素外部，如果想要将字母 O 显示在元素中，就要应用 background-position 属性调整背景图片的地位。
在 ps 软件中关上精灵图（ps.gaoding.com），应用圈选工具，从图片的左上角测量到字母 ”O” 的左上角，测量间隔为：程度 390px，垂直 105px。
因为背景图片整体须要向左上角挪动，所以 background-position 的值两个方向都是正数：别离为 -390px 和 -105px。此时，字母 o 曾经显示在元素外部。
如果地位测量有偏差，能够在浏览器的开发者工具中，找到页面元素，选中属性值，按下键盘的高低箭头，对属性值进行微调，地位调整称心后，依据这个值来批改款式。
兴许你会问，精灵图是前端工程师制作的吗？实际上，在团队的网站开发中，网页所须要的各种图片，UI 设计师都会为咱们筹备好，咱们间接应用即可。
接下来，咱们就应用精灵图技术，实现“千锋”拼音首字母的展现。
创立 014-sprites 文件夹，在文件夹下创立 sprites.html 文件和 sprites-style.css 文件，关上 html，构建根底代码，引入内部款式。
应用 emmet 命令：div.box$*2 疾速创立两个带有类名的 div 元素。
HTML
<div class="box1"></div>
<div class="box2"></div>
关上 css 文件，定义 div 元素选择器，申明款式：width: 50px，height: 70px，border: 2px solid gray。
先看一下成果，两个带有灰色边框，纵向排列的容器就做好了！
持续给 div 增加款式：float: left，margin: 10px。
此时，容器曾经横向显示，容器之间也有了间距。
CSS
div{
width:50px;
height:70px;
border: 2px solid gray;
float:left;
margin:10px;
}
再定义一个 .box1 选择器，申明款式：background: url(sprites.png) no-repeat。
预览一下成果，字母“a”曾经在第一个容器中显示进去。
在 ps 中应用圈选工具，测量图片左上角到字母“q”左上角的程度间隔为 545px，垂直距离为 110px。
给 background 属性追加款式值：-545px -110px。
这样，字母“q”就显示进去了！如果对地位不称心，能够在这里微调。
CSS
.box1{background:url(sprites.png) no-repeat -545px -105px;
}
反复后面的操作。在 ps 里测量字母 f 的地位，程度方向 390px，垂直方向 20px。
再定义一个 .box2 选择器，申明款式：background: url(sprites.png) no-repeat -390px -20px；
再看一下成果，字母“f”也显示进去了。也能够微调一下地位。
CSS
.box2{background:url(sprites.png) no-repeat -386px -14px;
}
写出本人的名字吧。大家加油！
文章配套视频链接：https://www.bilibili.com/vide…
