jQuery的背景图片重叠问题

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，所以会产生重叠效果。当你将主教的位置移过来时，它简单地移动到车顶上。您可以执行以下操作之一：

1. 将您的精灵加倍以获得白色和灰色背景。然后切换到适当的空间。 PNG不会透明，所以你会掩盖它。
2. 你可以更新你的jQuery来隐藏目的地的背景，在这种情况下是白嘴鸦。

例第2项：（您必须巧妙运用你的选择）

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

UPDATE

看着你的页面后多一点，你也可以通过以下方法解决它用class'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>