javascript - 如何将图像放在其他图像的一部分上

Question

我试图将棋子的图像放在棋子的其他图像的一部分上，但是当我尝试这样做时，它会将棋子放在前一个棋子附近:

这就是我想要拥有的:

HTML:

<td class="" row="0" col="0"><span>1</span>
<img class="soldiers" playernumber="1" soldiernumber="1" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="2" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="3" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="1" soldiernumber="4" src="Resources/images/player_1.png">
<img class="soldiers" playernumber="2" soldiernumber="1" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="2" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="3" src="Resources/images/player_2.png">
<img class="soldiers" playernumber="2" soldiernumber="4" src="Resources/images/player_2.png">
</td>

CSS:

td {
    width: 80px;
    height: 80px;
    text-align: left;
    vertical-align: top;
    border: 1px solid black;
    position: relative;
}

.soldiers
{
    width:20px;
    height:20px;
}

td span {
    position: absolute;
    bottom: 0;
}

Answer 1

我准备了一个 jsFiddle展示您的意图。

$(function(){
    var s = 0;
    $('.soldiers').each(function(){
        $(this).css({'top':s,'left':s});
        s+=10;
    });
});

fiddle 中发生的事情是我添加了 position:absolute; 到类 .soldiers并为每个 .soldiers 元素增加(通过 jQuery each() 方法)top 和 left 的确定值(在本例中为 10)。

如果您稍后要移动棋子，您可能还需要使用 z-index 为士兵进行图层定位