CSS基础学习之精灵图（六）

7，精灵图

7,1 简介

介绍：项目中将多张小图片，合并成一张大图片，这张大图片称为精灵图。

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度。

7.2 使用步骤

1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同。

2. 将精灵图设置为盒子的背景图片

3. 修改背景图位置

      通过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>  <!--标签内有搜索框 -->