背景图片

Question

我想在表格的1个单元格中放置背景图像。当我在表格标签或“风格”中指定背景时，将应用于整个屏幕。是否可以仅使用html为表中的不同单元格指定不同的本地图像？

相关HTML（来自OP的评论）：

<table align="center" height=501 border=2>
    <tr>
        <td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
      <a href="table9_1.html" target="_self"> Apple pie </a>s</td>
        <td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
    </tr>
</table>

Answer 1

<table style="width: 100%; height: 300px; ">
     <tr>
         <td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
         <td>CELL TWO</td>
    </tr>
</table>

应用风格的方法：

• 内联样式（通常不是首选方法）
• 班级选择器
• CSS2 / 3层次结构选择器或伪类
• ID选择器

Answer 2

只需在单元格的<td>元素上使用内联CSS。

例如：

<td style="background: url(/resources/images/background.png);">

Answer 3

为<td>代码（或<th>代码）指定背景（使用样式属性）

Answer 4

您必须将其指定给单元格（td标记），而不是指定整个表格。 这样做：

<tr><td style="background-image:url('yourPath')"></td></tr>

Answer 5

使用CSS有两种方法，为单元格分配id：

#tableCellID {
    background-image: url(path/to/image.png);
}

或使用nth-child：

tbody tr:nth-child(2) td:nth-child(3) {
    background-image: url(path/to/image.png);

}

将两种方法合并为一个JS Fiddle demo。

如果你必须使用内联样式（我衷心建议如果 可以避免这种情况）：

<td style="background-image: url(path/to/image.png);">...</td>

或者，可能（但已被弃用）：

<td background="path/to/image.png">...</td>

但是，请注意我使用这些方法之一 推荐或支持。当然最后的方法很糟糕，但如果只是 方法，你可以接受......只是不要告诉我你使用过它。这太可怕了，它会让我保持清醒，感到内疚。

Updated the previous JS Fiddle demo

Answer 6

HTML：

<table>

    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>

    <tr>

        <td class="cell">Cell 1</td>
        <td id="cell">Cell 2</td>
        <td style="background-color: yellow">Cell 3</td>

    <tr>

</table>

CSS：

.cell {
    background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}

#cell {
    background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}

预览：http://jsfiddle.net/384An/