Html 如何将一个div类与不同的CSS图像样式属性配对

我正在努力将CSS样式代码从HTML放到CSS样式表中。我使用了一张不同字符的图片，我使用的CSS将图像完美地切割成不同的字符，CSS位于div类“spelers”后面。我应该在我的类中添加ID还是

这是我的密码

  <div class="spelers_lijn1" id="spelers_lijn_1">
            <div class="stang"></div>
            <div class="spelers" style="left:162px;background-position:35px 0px"></div>
        </div>
        <div class="spelers_lijn2" id="spelers_lijn_2">
            <div class="stang"></div>
            <div class="spelers" style="left:92px;background-position:0 0"></div>
            <div class="spelers" style="left:232px;background-position:-35px 0"></div>
        </div>
        <div class="spelers_lijn3" id="spelers_lijn_3">
            <div class="stang"></div>
            <div class="spelers" style="left:112px;background-position:-70px 0"></div>
            <div class="spelers" style="left:212px;background-position:-105px 0"></div>
        </div>

---

在这里，我使用的图像

请提供一个我遵循本教程和我重建这个项目@Kimkkanandersson所以我试图将CSS代码从HTML文件中移到CSS样式表中是的，但是如果你将代码插入JSFIDLE，你会发现画布是空白的。我们需要一个工作示例。这里有一个关于JSFIDLE的工作示例：@kimkanandersson

.spelers {
  position: absolute;
  width: 30px;
  height: 69px;
  top: 0;
  background-image: url(../images/spelers.png);
}