背景圖像不填充所有表

的我有以下代碼背景圖像不填充所有表

<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/背景圖像 - 儘管它被設置爲相同的尺寸的表 - 具有大的白色條帶在底端。由於桌子有邊框，這看起來相當糟糕。怎麼修？

來源

2014-05-15 CalvT븃

圖像的高度過低。嘗試將背景高度更改爲314px。如果您從後臺移除background-repeat屬性，您可以看到圖像如何適合內容。

來源

2014-05-15 13:47:28 faby

問題是<tbody>和<table>不同喚起注意，使之同你需要給表CSS來display:inline-block

<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

來源

2014-05-15 13:48:03

好的，這工作正常，但它延伸圖像。如果我只是編輯表格高度小於14px，並將圖像保留在300px - 會起作用嗎？ –

如果你不希望圖像被拉伸，你可以在x方向上重複，並指定寬度爲'auto'，如'background-repeat：repeat-x; background-size：auto 300px;'，參見[演示（http://jsfiddle.net/Hw4TJ/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％

來源

2014-05-15 13:58:25

採取背景大小：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>

來源

2014-05-15 14:21:26

背景圖像不填充所有表

回答

相關問題