我可以将图像放在<tr>标签上吗？

Question

我能用CSS把背景图片放在<tr>标签上吗？这个背景图片会在所有浏览器上显示吗？

Answer 1

HTML：

<table>
    <tr>
        <td> &nbsp; </td>
        <td> &nbsp; </td>
        <td> &nbsp; </td>
        <td> &nbsp; </td>
    </tr>
</table>

CSS：

table { 
    width:300px; 
    height:200px; 
    border:3px solid blue;
}

tr {
    background-image:url(http://dummyimage.com/300x200/f00/000);
    display: block;  
    height: 100%;
}

现场演示： http://jsfiddle.net/simevidas/Jk5BE/5/

来源：http://code.google.com/p/chromium/issues/detail?id=44361

要使其正常工作，必须设置行高。在我的演示中，我将其设置为100%，因为我的表中只有一行。如果有多行，则将行的高度设置为背景图像的高度。

Answer 2

是。它将在所有现代浏览器上显示。

您可以使用background属性，也可以使用CSS。

如果你将它用于HTML电子邮件，那么它将不会显示在Outlook 2007或更高版本中，因为它们使用Microsoft Word作为呈现引擎。为什么？天知道。但它们确实如此。

Answer 3

这很棘手。在我看来，即使您说不要重复，在CSS中应用于tr元素的背景图像也会在每个表格单元格上重复。因此，如果图像不是从右到左对称的简单渐变，您可能得不到预期的效果。下面是一个示例：

http://jsfiddle.net/Bx998/1/

HTML

<table id="tbl1">

    <tr>
        <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
    </tr>

    <tr>
        <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
    </tr>

</table>

CSS

#tbl1 tr{
     background: transparent url('http://www.google.com/images/logos/ps_logo2.png') no-repeat;
}
#tbl1 tr td{
  padding: 5px;
    height: 50px;
  border: 1px solid #888;  
}
#tbl1 tr td:first-child{
 padding: 0 0 0 50px;   
}