精灵/雪碧图
在实际开发中,我们会遇到很多小图片。如果拆分起来加载很消耗性能。 所以一般UI都会将小图片汇合在一起。
使用技巧
- 先将盒子尺寸设置大一点,使用
background-position:xxx xxx
将目标放置在左上角 - 再将盒子都给设置对应大小即可
实践
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.item {
width: 85px;
height: 60px;
background: url(./img/sprite.jpg) no-repeat -280px -240px;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>