CSS精灵技术
【1】使用场景
【2】语法
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background: url(./img/wz.webp) no-repeat;}.box1 {/* 第一种方法每个盒子写一遍 */width: 27px;height: 26px;/* 精灵图的核心是作为背景 *//* background: url(./img/wz.webp) no-repeat 0 -169px; */background-position: 0 -169px;}.box2 {width: 28px;height: 26px;/* 精灵图的核心是作为背景 */background-position: -90px -170px;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>