所有图片合成一个图片 通过css改变 图片位置 来实现图片只加载一次。尽可能减少请求次数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 50px;
height: 50px;
border: 2px solid #00aaff;
margin: 50px;
background-image: url(http://bk.renxingdao.work/wp-content/uploads/2022/08/download.png);
}
.testDiv0 {
background-position-x: 0px;
background-position-y: -105px;
background-size: 550px;
}
.testDiv1 {
background-size: 180px;
background-position-x: 0px;
background-position-y: 195px;
}
</style>
</head>
<body>
<div class="testDiv0">
</div>
<div class="testDiv1">
</div>
<div class="testDiv2">
</div>
<img src="http://bk.renxingdao.work/wp-content/uploads/2022/08/download.png" alt="">
</body>
</html>