Question

我有以下代码

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;background-size:930px 300px; border:10px solid #cccccc; ">
  <tr><td height="60px" colspan="2"></td></tr>
  <tr>
    <td width="360px" height="180px" style="background-image: url('img'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " >
      Text
    </td>
    <td width="570px"></td>
  </tr>
  <tr><td height="60px" colspan="2"></td></tr>
</table>

当这个JSFiddle显示http://jsfiddle.net/Hw4TJ/背景图片时 - 尽管它设置为与桌子相同的大小 - 底部有一个大的白色条带。由于桌子有边框，这看起来很糟糕。怎么解决？

Answer 1

问题是<tbody>和<table>的不同高度，要使它与display:inline-block

表格的css相同

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;
                                           display:inline-block;
                                           background-size:930px 300px; 
                                           border:10px solid #cccccc; ">
<tr><td height="60px" colspan="2"></td></tr>
<tr>
<td width="360px" height="180px" style="background-image: url('img/pc/backgroundv3.png'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " >
Text
</td>
<td width="570px"></td>
</tr>
<tr><td height="60px" colspan="2"></td></tr>
</table>

<强> DEMO Fiddle

Answer 2

采用background-size：100％自动;

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;background-size:100% auto; border:10px solid #cccccc; ">
  <tr><td height="60px" colspan="2"></td></tr>
  <tr>
    <td width="360px" height="180px" style="background-image: url('img'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " >
      Text
    </td>
    <td width="570px"></td>
  </tr>
  <tr><td height="60px" colspan="2"></td></tr>
</table>

Answer 3

图像的高度太低。尝试将背景高度更改为314px。如果从背景中删除background-repeat属性，则可以看到图像如何适合内容。

Answer 4

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;background-size:100% 100%; border:10px solid #cccccc; ">
  <tr><td height="60px" colspan="2"></td></tr>
  <tr>
    <td width="360px" height="180px" style="background-image: url('img'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " >
      Text
    </td>
    <td width="570px"></td>
  </tr>
  <tr><td height="60px" colspan="2"></td></tr>
</table>

只需更改背景尺寸100％

没有填满所有表的背景图像

4 个答案: