响应式桌面背景图片

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>