一、雪碧图
- CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
1.1优点
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
1.2原理
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到自己需要的位置
准备工作：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"><title>Document</title><style>.icon1{/* span是内联元素，不能直接设置大小,通过display：block变成一个块级元素 */display: block;width: 60px;height: 66px; background-image: url(1.png);border: 1px solid red; background-position: -2px 0px;}.icon2{/* span是内联元素，不能直接设置大小,通过display：block变成一个块级元素 */display: block;width: 60px;height: 66px; background-image: url(1.png);border: 1px solid red; background-position: -2px 126px;}</style>
</head><body><span class="icon1"></span><span class="icon2"></span>
</body></html>
