7,精灵图
7,1 简介
介绍:项目中将多张小图片,合并成一张大图片,这张大图片称为精灵图。
优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度。
7.2 使用步骤
- 创建一个盒子,设置盒子的尺寸和小图尺寸相同。
- 将精灵图设置为盒子的背景图片
- 修改背景图位置
通过PXCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:x y;
<style>
.phone{
display:inline-block;
width:18.8px;
height:24px;
background-color:white;
background-image: url(./images/prite.png);
background-position:-3px 0;
}
.search{
display:inline-block;
width:22px;
height:21px;
background-color:white;
background-image:url(./images/prite.png);
background-position:0 -223px;
}
</style>
<!-- 精灵图的标签都用行内标签 -->
<div class="phone"></div> <!--标签内有手机 -->
<div class="search"></div> <!--标签内有搜索框 -->