背景图片及精灵图

原创已于 2023-08-02 19:28:40 修改 · 305 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-08-02 19:12:16 首次发布

文章介绍了如何在一个div中使用精灵图作为背景图片，以降低服务器压力。通过将多个小图片合并到一张大图中，只需一次请求即可获取所有图标，并通过调整`background-position`实现不同图标显示。

.picture {
  width: 48px;
  height: 48px;
  background-image: url('../images/精灵图-侧边功能.png');
}

为一个有宽高的div设置了背景图片，背景图片只作用在div的content区域内，不作用在padding和border上。

知识点：
在这里插入图片描述
背景图使用精灵图（上面的这张图片）可以有效地减轻服务器的压力，如果是所有的小图片都分开，那么需要请求十二次，而使用精灵图只要请求一次，就能获得所有的图标，在使用背景图时，使用

background-position: -96px -48px;

去进行调整。