欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~
1 概念
CSS-sprites，又叫精灵图，也是CSS图像拼合或者CSS贴图定位
2 CSS-sprites拼合
选择合适的图像素材去拼合到一张图片上，再、利用定位将图像在网页中渲染出来
- 一般小素材或者
icon类素材或者比较少改动的图片适合拼合为CSS sprites - 一般大图像或者网页背景不适合拼合为CSS sprites，网络带宽不好的情况下，访问大图的拼合图像，加载时间需要更长
- 推荐：一般最好将尺寸大小差不多的品何在一张图片上，这样也会有利于开发者计算定位，降低出错率，提高效率
3 CSS-sprites优点和缺点
优点：
- 将众多小图像拼合，一次性加载，减少http请求，提高网站性能
- 减少图片文件数量，减少命名太多的困扰，对开发者友好，降低出错率，提高效率
缺点：
- 在做图片拼合的时候，需要在页面中留有合适的空间，需要精确测量计算位置，会很繁琐，当然现在也有对应的自动拼合且产生定位代码的软件
- 不利于维护，当CSS-sprites上的一个图像需要改动时，往往需要改动其他的图像的CSS代码，这就要在制作CSS sprites的时候就要考虑这种图片以后改动会不会很频繁，如果很频繁，可以不放在拼合图像中
4 CSS-sprites例子
CSS-sprites
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
<style>
.sprites div {
margin: 5px;
}
.sprites span {
float: left;
width: 20px;
height: 20px;
background-image: url(sprite.png);
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0;
}
.sprites3{
background-position: 0 -20px;
}
.sprites4{
background-position: -20px -20px;
}
.sprites5{
background-position: -40px 0;
}
.sprites6{
background-position: -40px -20px;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>删除图标</div>
<div><span class="sprites3"></span>存款图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
<div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>
然后快去看看执行结果吧：
result
