如何使用相同的精灵图像作为背景图像-不同位置的背景图像(相对于另一个位置)在同一个div中？

Question

原始精灵形象

我想达到的结果

我试图覆盖一个图标，从一个雪碧图像，而一个图像来自同一雪碧，只有css。我附上了我想要达到的目标的图像和原始精灵形象的样本。我在网上搜索过，但没有多大帮助。如果你解释这个概念或者指向概念的来源，那就更好了。)预先感谢。

<div class="course-banner deep-learning"></div>

.course-banner::after,
.course-banner::before {
    background: black url(./images/sprite-courses.webp) no-repeat 0 0;
}

.course-banner::after {
    background-position: 0 0;
    left: 0;
}

.course-banner::before {
    background-position: 100% 0;
    right: 0;
}

.course-banner::after,
.course-banner::before {
    content: "";
    height: 100px;
    width: 342px;
    position: absolute;
    top: 0;
}

.deep-learning::before, .deep-learning::after {
  background-position-y: -2640px;
}

Answer 1

您可以使用多个背景，并首先放置跨语言部分：

第一行图像的示例

element {
  height: 100px;
  width: 340px;
  background: 
    url(https://i.stack.imgur.com/Hpp67.png) top left,
    url(https://i.stack.imgur.com/Hpp67.png) top right; 

}

在线演示，因为你的png不是跨种族的