响应式表格背景图片

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>

问题在于背景图像的底部被裁剪了。如何显示整个背景图像？

- Robster

---

那么你想要缩放它，以便同时看到图像的底边框？ - Matthias Seifert

是的，我需要看到所有的边框，无论表格内有多少文本。 - Robster

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>

- Matthias Seifert

---

谢谢。我明白了。那我就在它周围加一个CSS边框。 - Robster