精灵图（十八课）
一、精灵图的作用
减少服务器的接受和发送用户请求的次数，提高页面加载效率
二、精灵图的使用
什么是精灵图：就是把很多个小的背景图片，集合在一张大的背景图片上
实现方法：通过对大的背景图片的位置定位来实现，即background-position
默认位置为大背景图片的左上角
ps：位置坐标移动时，x轴往右走为正值，y轴往下走为正值
代码：
<style>.box1 {width: 25px;height: 25px;margin: 20px auto;/* background-color: pink; */background: url(./sprites.png) -60px no-repeat;}.box2 {width: 25px;height: 25px;margin: 50px auto;/* background-color: pink; */background: url(./sprites.png) -60px -35px no-repeat;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body> 
代码：
<style>span {display: inline-block;}.M {width: 180px;height: 160px;/* background-color: pink; */background: url(./name.png) -135px;}.G {width: 155px;height: 160px;/* background-color: pink; */background: url(./name.png) -115px -160px;}</style>
<body><span class="M">M</span><span class="G">G</span>
</body>
