​精灵图的介绍及使用步骤

精灵图的介绍:

场景:项目中将多张小图片合并成一张大图片,这张大图片称为精灵图。

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

例如:

  • 如果八张小图片需要在服务器中分别发送八次
  • 合并成为一张图片后只需要在服务器发送一次

精灵图的使用步骤

  1. 创建一个盒子
  2. 通过PxCook量取小图片的大小,将小图片的宽高设置给盒子
  3. 将精灵图设置为盒子的背景图片
  4. 通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y
        .one {
            width: 24px;
            height: 24px;
            background: url('./img/bj.jpg') 0 -264;
        }

 

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

多线程(lock锁)

2021-11-27 23:23:45

知识碎片

CSS的过渡属性

2021-11-28 17:11:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧