使用背景图，制作雪碧图效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<!-- reset.css文件内容参考：https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
<link rel="stylesheet" href="./reset.css">
<style>
.img{
width:150px;
height:150px;
border:2px solid;
background-image:url("https://ss1.bdstatic.com/70cfuxsh_q1ynxgkpowk1hf6hhy/it/u=382503044,3585482793&fm=26&gp=0.jpg");
background-repeat: no-repeat;
background-position:-160px -80px;
}
</style>
</head>
<body>
<div class="img">
</div>
</body>
</html>
原图展示：
我们要从上面的图片中抠取出太阳来当做背景图片。
效果展示：
黄山市民网：https://www.huangshanshimin.com/
