背景img开箱即用边界
背景img开箱即用边界
提问于 2018-05-13 23:42:58
我有以下表格和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填充的所有其他单元格。
回答 2
Stack Overflow用户
发布于 2018-05-13 23:50:25
一个想法是使用伪元素并依赖于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>
Stack Overflow用户
发布于 2018-05-13 23:50:13
您可能需要将类放在<table>标记中。在我看来，背景图像需要在父标记中，而不是在表数据部分中。希望这是有意义的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50317854
复制相关文章
相似问题
腾讯云开发者
