css sprites使用

CSS Sprites 是一种将多个小图标或背景图像合并到一个大图中的技术。通过减少HTTP请求次数，可以显著提高页面加载速度。其核心原理是：通过设置元素的背景图（background-image）为这个大图，然后调整背景位置（background-position）来显示需要的部分。

一：打开在线工具 

https://www.toptal.com/developers/css/sprite-generator

1. 将多个小图标或背景图合并成一张大图，并记录每个小图在大图中的位置坐标（通常使用工具自动生成坐标）。如下：

 上传完所有图片后点击DOWNLOAD

 

html 

<div class="sprite icon-home"></div>
<div class="sprite icon-settings"></div>

css

/* 基础样式 */
.sprite {background-image: url("sprite.png"); /* 引用大图 */background-repeat: no-repeat;       /* 禁止重复 */display: inline-block;              /* 行内块级元素 */
}/* 单个图标尺寸 */
.icon-home {width: 50px; height: 50px;/* 调整背景图位置显示对应图标 */background-position: 0 0; /* 显示左上角第一个图标 */
}.icon-settings {width: 50px;height: 50px;background-position: -50px 0; /* 左移50px显示第二个图标 */
}