背景img开箱即用边界

Question

我有以下表格和css，在这种情况下，图像填充表格单元格。

但是，我如何才能使图像具有完整的大小并且超出单元格边界呢？

​

.bg-player-tank {
  background-image: url(https://wxpcdn.gcdn.co/dcont/tankopedia/germany/G54_E-50.png);
  background-size: contain;
  background-repeat: no-repeat;
}

td {
  width: 100px;
  height: 100px;
  border:1px solid;
}

<table>
  <tr>
    <td class="bg-player-tank"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>

</table>

​

我在试着做个游戏。整个gamefield我已经做了26*26表。问题是，坦克必须有4个电池，而不是4个。但我不知道该怎么做。所以我认为，这是可能的，图像只需要1个单元，但浏览器将其呈现为“4个单元”。用css的background-img填充的所有其他单元格。

​

Answer 1

一个想法是使用伪元素并依赖于overflow：

​

td {
 padding:25px;
 border:1px solid;
}

.bg-player-tank {
  position:relative;
}
.bg-player-tank:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:-68px;
  bottom:-62px;
  background-image: url("https://wxpcdn.gcdn.co/dcont/tankopedia/germany/G54_E-50.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index:-1

}

<table>
  <tr>
    <td class="bg-player-tank"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

​

Answer 2

您可能需要将类放在<table>标记中。在我看来，背景图像需要在父标记中，而不是在表数据部分中。希望这是有意义的。