精灵图(十八课)
一、精灵图的作用
减少服务器的接受和发送用户请求的次数,提高页面加载效率
二、精灵图的使用
什么是精灵图:就是把很多个小的背景图片,集合在一张大的背景图片上
实现方法:通过对大的背景图片的位置定位来实现,即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>