响应式表格背景图片

Question

我需要一个响应式表格背景图像。我的问题是高度需要灵活，取决于里面有多少信息。我是这样设计的：

body {
  background-color: black;
}

<table style="width: 520px;background-image: url(http://wow.zamimg.com/images/wow/tooltip.png);background-size: cover;color:white">
  <tr align="center" >
    <td>Description1</td>
  </tr>
  <tr align="center" >
    <td>Description2</td>
  </tr>
  <tr align="center" >
    <td>Description3</td>
  </tr>
</table>

问题是背景图像的底部被裁剪了。

如何显示整个背景图像？

Answer 1

您可以将background-size 设置为100% 100%，这会拉伸图像以适应元素。

但是，您的图像会遇到问题，因为您想查看表格周围的边框，这将不起作用，直到表格具有特定的最小高度。发生这种情况是因为高度太低而无法实际显示微小的边框，例如：您有一个高度为 100px 的图像（边框为 1px），并且想将其放入高度为 25px 的表格中。这意味着边框只有 0.25px，没有监视器可以显示，为什么不显示。 （我希望我能澄清这个问题:-)）

一种解决方法是通过 css 给表格一个边框。

我使用另一个示例图像来证明 background-size: 100% 100% 有效

body {
  background-color: black;
}

.bg {
  width: 520px;
  background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-1.jpg);
  background-size:100% 100%;
  color:white;
}

<table class="bg">
 <tr align="center" ><td>Description1</td>
</tr>
 <tr align="center" ><td>Description2</td>
</tr>
 <tr align="center" ><td>Description3</td>
</tr>
</table>