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%有效

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

敏感表背景图像

1 个答案: