我们能否解决Chrome浏览器中多单元格表格的行背景图片问题？

Question

这是一个常见的问题 - 但我还没有看到一个好的答案（我已经搜索过了）。如果你在CSS中将背景图像设置为表格行，则该图像将在每个单元格中重复显示。如果你为行设置position: relative，并为单元格设置background-image: none，则可以解决IE上的问题，但在Chrome上无法解决！我不能使用背景定位，因为有很多调用和它们的大小不同。（而且图片不对称-从一侧淡出。有人能帮忙吗？

CSS代码示例：

tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }

HTML很基本 - 一个多单元格表格。

目标是让每一行淡入不同的颜色，但可以是任何非图案图像。

- Ya'el

---

你有现成的演示或源码CSS吗？ - Kyle

看起来Firefox是唯一表现正常的浏览器。Chrome、IE、Opera和Safari都会导致背景图片在每个单元格中重新启动，而不是在整行中流畅地连续显示。这个问题已经列在http://code.google.com/p/chromium/issues/detail?id=44361上，但看起来不会被修复。 - Chris McFarland

使用Google Chrome 5.0.375.55在Ubuntu 9.10上，我的测试结果很好。链接为http://jsfiddle.net/pzjUt/，截图如下：http://img153.imageshack.us/img153/3521/resultm.png。 - jackocnr

更新：奇怪的是，Chrome的新版本（5.0.375.70）再次破坏了这个功能，所以现在我在每个单元格中都会重复显示图像... - jackocnr

Answer 1

好的，我花了很长时间研究这个问题，但无法找到适用于所有浏览器的简单解决方案。但是，由于我看到您正在使用固定高度行，我开发了自己的解决方法：http://jsfiddle.net/DR8bM/

基本上，不是将背景图像放在行上，而是将其放在每行第一个单元格中的绝对定位的

元素中（并将其扩展到填充整行）。这有点hacky，但可能是实现您想要的唯一可靠的方法。

- jackocnr

Answer 2

将float:left添加到行中，这应该可以解决它。

tr {float:left;}

- Aziz

---

对我有用。在Chrome和Safari中解决了问题；在Firefox和Internet Explorer中没有引起任何问题（原始问题不存在的地方）。 - that0th3rGuy

应用此修复后，我失去了所有列的宽度。只有在预先定义了列宽度的情况下才能起作用！ - blo0p3r

@blo0p3r 你说得对。但这是一种flex样式：请看我的codepen - yunzen

在Chrome中，似乎只有在行中没有单元格设置了背景时才能正常工作。 - Rauli Rajande

Answer 3

在Windows 10上的Chrome 54中进行测试：

tr {
  background-attachment: fixed;
}

尽���它似乎不是完美无瑕的 - 背景图像只在加载时在整个视口中重复，这意味着当您向下滚动时出现的单元格没有背景。

- davidanton1d

---

底部的评论最终帮助了我，谢谢！ - Ecko