响应式表格背景图

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>

​