首先什么是精灵图?
精灵图是一种背景图片的应用方式,将很多常用的小图片集合到一个大图中,把整个大图做为一个背景图,然后通过 background-position 属性进行使用。
为什么要使用精灵图?
因为精灵图可以将多个小图合并到一张图,减少了图片的请求次数。
精灵图如何使用
精灵图的显示主要借助于背景位置来实现——background-position
创建一个精灵图的别名
如: class: png
首首要在background-image 背景图片中导入
然后给png设置为行内块,让精灵图的大小可以改变(完成后,后续需要用精灵图可以直接增加类名即可)
/* 给精灵图的属性放倒后期有引用 */
.png{
display: inline-block;
background-image: url(./img.精灵图.png);
}
在要使用的元素中加入 png 这个class名即可
比如:
<div class="box">
<!-- 用空格隔开代表是两个类名 -->
<span class="title png"></span>
<span class="text"></span>
</div>
进行了该设置以后,第一个span就可 使用精灵图了
重点来了,如何获取到自己想要的那个精灵图呢
用 background-position 属性调整其位置
background-position: top;
background-position: left;
background-position: center;
但通过小图在大图中的左上标来显示更加的精准:
小图的坐标是通过其在左上角的位置来定的
background-position: 0px -4px;
同时也要设置引用小图的大小如: