精灵图

@Sprite

. 每个 <img> 都会向 WEB 服务器发送一个 http 资源请求

. 为减少服务器的资源请求次数，将多个图片/图标有规则的排列在一张图上，根据具体位置，使用对应的图片

. 适合小图片/图标使用

. 由美工完成精灵图的制作；图片通常不做缩放

. 优点：一次请求，多次使用

. 缺点：图片尺寸调整后，需要重新制作精灵图；且不适合媒体自适应；现在大多使用字体图标代替

[] 京东宣传

多

品类齐全，轻松购物

块

多仓直发，极速配送

好

正品行货，精致服务

省

天天低价，畅选无忧

[提示]

.坐标轴向下是正y；向右是正x

.取消重复，只保留一个图片

.原始图片是308*234；对应的图片大小约为36*45，应该从[0,-189]开始显式

.如果计算不出来，使用开发者视图F12调整：从左边顶部(0,0)开始调整至合适

.sprite .icon {
  width: 36px;
  height: 45px;
  background-image: url(./web/imgs/jd.png);
  background-repeat: no-repeat;
}

.sprite .more {
    background-position: 0 -189px;
}

.sprite .fast {
    background-position: -41px -189px;
}

.sprite .good {
    background-position: -82px -189px;
}

.sprite .save {
    background-position: -123px -189px;
}

[] 人物简介

.如果想改变大小，应同比例调整