Question

Here is my working page。我将按钮附加到白色主教，你可以四处移动，但左图像与右图像重叠。我认为问题出在CSS上。简要结构就在这里。

<script>
        $(document).ready(function(){
            $('#top').click(function(){
                $('#p81').animate({top: "-=64px"}, 100);
            });
</script>
<style>
        div.chess_board{
            height: 512px;
            position: relative;
            width: 512px;
        }
        div.chess_square{
            height:64px;
            position: absolute;
            width:64px;
        }
        div.chess_square.white {
            background: none repeat scroll 0 0 #ffffff;
        }
            .
            .
            .
        div.chess_piece{
                background-image: url("sprite.png");
                height: 64px;
                width: 64px;
                position: absolute;
            }
        div.chess_piece.bishot.white{
            background-position: -64px 0;           
        }
</style>

<div class="chess_board">
  <div id="b81" class="chess_square white" style="top: 448px; left: 64px;">
    <div class="chess_square_inner"></div>
    <div id="p81" class="chess_piece bishot white"></div>
  </div>
</div>
<input type="button" id="top" value="top" />

Answer 1

您将获得重叠效果，因为您使用的是透明PNG。当你移动主教的位置时，它会在车顶上移动。您可以执行以下操作之一：

将精灵加倍，使其具有白色和灰色背景。然后切换到适当的空间。 PNG不会透明，所以你会掩盖它。
您可以更新您的jQuery以隐藏目的地的背景，在本例中为车。

第2项的示例:(您必须使用选择器变得狡猾）

$('#left').click(function(){
    $(piece).animate({left: "-=64px"}, 100);
    $("#p80").css("background-image", "none");
});

<强>更新

在查看您的页面之后，您还可以通过使用类'chess_piece'设置div的背景颜色来解决它。

.chess_piece
{
    background-color: #ffffff/#cfcfcf;
}

你可以用jQuery和你的活动来做到这一点：

$('#left').click(function(){
    $(piece).animate({left: "-=64px"}, 100);
    $(piece).css("background-color", "#cfcfcf");
});

更新2

看到您的评论后，问题略有改变。要解决该问题，您需要在作品中添加z-index。生成的标记类似于：

<div class="chess_piece bishot white" id="p81" style="top: -64px; left: 64px; z-index: 10000;"></div>

背景图像与jQuery重叠的问题

1 个答案: