響應式桌面背景圖片

我需要一個響應式桌面背景圖片。我的問題是高度需要靈活，取決於內部有多少信息。我做了這樣的：響應式桌面背景圖片

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>

的問題是，背景圖像的底部被裁剪。

如何顯示整個背景圖像？

來源

2017-07-26 Robster

所以，你想它的規模，以查看圖像藏漢的底部邊框？ –

是的，無論表格內有多少文字，我都需要看到所有邊框。 – Robster

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

來源

2017-07-26 15:17:55

謝謝。我明白。所以我只會圍繞它製作一個css邊框。 – Robster

響應式桌面背景圖片

回答

相關問題