レスポンステーブルの背景イメージ

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%に設定すると、イメージを要素に合わせて伸ばします。

しかし、テーブルに特定の最小高さが設定されるまで、テーブルの周りを見る必要があるため、画像に問題が発生します。これは動作しません。これは、高さが小さすぎて実際に小さな境界線を表示できないためです。たとえば、100ピクセルの高さ（境界線が1ピクセル）のイメージを持ち、25ピクセルの高さのテーブルに配置したいとします。つまり、国境には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>