精灵图

雪碧图（CSS Sprites）是一种图像合并技术，将多个小图标或图片合并到一张大图中，然后通过 CSS 的 background-position 属性来显示需要的部分。

主要优势

• 减少 HTTP 请求数量
• 减少图片总大小
• 提升页面加载速度
• 解决图片闪烁问题

基础语法

.icon {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
    background-position: x y;  /* x 水平偏移，y 垂直偏移 */
}

举例：

雪碧图

在 Google 开发者样式体系下，借助 background-position 属性对图标实施位移操作，以此达成预期的展示效果。继而依据实际需求精准计算所需图片的规格大小，并运用设定宽高值的方法对图片予以裁剪处理，从而获取符合要求的目标图片资源。

css代码示例

预期效果图