如何在相同 div 中使用相同的精灵图像作为具有不同位置（一个位置在另一个位置之上）的背景图像？

Question

Original sprite image
Result I'm trying to achieve

我正在尝试将 sprite 图像中的图标覆盖在仅具有 css 的同一 sprite 中的图像上。我附上了我想要实现的图像和原始精灵图像的样本。我已经在互联网上搜索过，但没有太大帮助。如果你解释一下这个概念或者指出概念的来源会更好。 :) 提前致谢。

<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; 

}

online demo 因为你的 png 不是半透明的

如何在相同 div 中使用相同的精灵图像作为具有不同位置（一个位置在另一个位置之上）的背景图像？

How to use same sprite image as background-image with different positions(one position over another) in a same div?

html

css

css-sprites

pseudo-class