CSS/Webkit：表格行的背景图像

出于某种原因，当您在Safari/Chrome中将背景图像应用于tr时，它会将其渲染为该规则适用于每个td

火狐：

（来源：）

狩猎：

（来源：）

我发现这篇文章讨论了一个修复：

我能让它在IE中工作，但不能为Safari找到它

---

您的表是否总是只有两行？例如：

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

您还可以使用一个精灵图像，其中使用一个图像，并将其放置在两个背景的不同位置

我意识到这可能不是最理想的解决方案，但它至少可以解决您的问题，并推动您的项目。我有时会使用像这样的简单解决方案来取得进展，然后再重新审视这个问题，使之更有效

---

希望这有帮助

默认情况下，TR和TD具有表单元格和表行的显示属性。我们需要他们忘记这一点，让他们感觉像是简单的块元素：

tr {display: block;}
td {display: inline-block; background: transparent;}

这段代码为我解决了渲染问题。

有点晚了，但是， 您可以使用“后台附件：修复”来解决此问题

<table>
  <tr class="bg">
    <td></td>
    <td></td>
  </tr>
</table>

---

而且它有效

你的代码会在哪里？啊，我想这将是你传统上为一张桌子做背景图像的方式。我已经很久没有认真地设计一张有切片背景的桌子了，所有这些我都没有想到。通过使用x/y值定位背景，我能够缓解Webkit浏览器中的显示问题，但在未来，这将是我将采用的方法，并且只需使用javascript动态应用适当的背景样式，以保持标记干净和简单。我将标记为已回答的好建议和功能解决方案。谢谢兄弟！感谢添加webkit@media CSS hack对我的完美修复@媒体屏幕和（-webkit min device pixel ratio:0）{tr{display:block；}td{display:inline block；width:195px}}感谢您的解决方案触动了我们的css，它节省了我大量的时间。是否用这个滚动过？有点滑稽谢谢你的主意。我花了一周的时间在寻找好的解决方案梯度背景tr表。谢谢，这救了我的命。我爱你。这应该被标记为答案，因为它不依赖于解决方法。这会将图像固定到页面背景，而不是表格行。例如，对于没有特定开始或结束，但不需要与表本身对齐的任何背景的重复模式，So将起作用

tr {display: block;}
td {display: inline-block; background: transparent;}

<table>
  <tr class="bg">
    <td></td>
    <td></td>
  </tr>
</table>

tr.bg {
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px;
    background-attachment: fixed;
}