Question

我可以在<tr>标签上使用CSS放置背景图片吗？这个背景图片是否会在所有浏览器中显示？

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

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

您既可以使用背景属性，也可以使用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; }

我可以在标签上放置图像吗？

3 个答案: