2017-07-26 134 views
2

我需要一个响应式桌面背景图片。我的问题是高度需要灵活,取决于内部有多少信息。我做了这样的:响应式桌面背景图片

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>

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

如何显示整个背景图像?

+0

所以,你想它的规模,以查看图像藏汉的底部边框? –

+0

是的,无论表格内有多少文字,我都需要看到所有边框。 – Robster

回答

0

您可以将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>

+0

谢谢。我明白。所以我只会围绕它制作一个css边框。 – Robster