Question

尝试将背景图像显示在Chrome中的单个表格单元格中...它会，但只有当我将鼠标悬停在该单元格上时才会显示。如果我删除：悬停，无论我做什么，它都不会显示。

我现在正在问这个问题，希望谷歌已经解决了这个问题，而且在搜索之后我还没有看到答案，或者有人已经弄明白了。另一个原因是2010年有搜索结果，他们主要讨论表行元素而不是单个单元格。

这无法在表格单元格中显示我的图像：

#matrix td.level {
position: relative;
vertical-align: top;
height: 200px;
width: 150px;
background: transparent url("/images/th-bg-level.png") no-repeat 0px bottom;
}

但我可以翱翔：

#matrix td.level:hover {
background: transparent url(/images/th-bg-level.png) no-repeat -157px bottom;
border: none;
}

如果我更改为<th>元素，它也会显示图像，但我并不是真的想要这样做...糟糕的编码习惯和所有......

这个问题有解决方案吗？

Answer 1

在<td>元素上使用背景可以正常工作，问题必须在其他地方。

td {
  padding: 30px;
}
td.target {
  background: transparent url("http://i.imgur.com/cAN2O2J.jpg") no-repeat 0px bottom;
  color: white;
}

<table>
  <tr>
    <td>John</td>
    <td class="target">Doe</td>
  </tr>
</table>

代码中的悬停状态和非悬停状态完全不同的文件夹（/images/ vs ../images/），不是问题吗？

Chrome表格单元格中的背景图片？

1 个答案: