在td标签上显示背景图像

时间:2013-03-03 14:39:27

标签: html css html5 css3

我想在标签td上显示背景图片。我有代码

<td style="background-image:url(../uploadimages/18-2-2013-23-33-01-Lighthouse.jpg);background-repeat:no-repeat;background-size:250px 180px;"></td>

<img src="../uploadimages/18-2-2013-23-33-01-Lighthouse.jpg" />

我使用标签img测试路径并且路径正确但我不知道它在td标签的背景图片中没有显示。

非常感谢

2 个答案:

答案 0 :(得分:11)

td不会显示背景图片,因为它没有任何内容,因此td中没有空间来绘制背景。 background-size设置背景的大小,而不是容器的大小。在width:250px;height:180px;的内嵌样式中尝试td - 它应该显示图像。

Here's a demonstration in jsfiddle。如果您从CSS中删除widthheight设置,则无法看到图片。

答案 1 :(得分:3)

正确的解决方案

首先,您必须指定td的宽度和高度。按照可以正常工作的示例---

<td style="background-image:url(../uploadimages/18-2-2013-23-33-01-Lighthouse.jpg);background-repeat:no-repeat;background-size:250px 180px;   width: 250px; height: 180px;"></td>