我们可以解决多单元表格中的表格行背景图像问题吗？答案

【问题标题】：Can we solve the table row background image problem, in chrome, in multi celled tables?我们可以解决多单元表格中的表格行背景图像问题吗？
【发布时间】：2011-03-01 03:46:13
【问题描述】：

这是经常被问到的——但我还没有看到一个好的答案（我看了）。如果您在 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 是基本的 - 一个多单元格表格。

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

【问题讨论】：

你有一个活生生的例子或一些源代码/css吗？
似乎 Firefox 是唯一表现得如此的浏览器。 Chrome、IE、Opera 和 Safari 都会导致背景图像在每个单元格中重新启动，而不是在整行中流畅地不间断地流动。此问题已在 code.google.com/p/chromium/issues/detail?id=44361 上列出，但似乎无法修复。
在 Ubuntu 9.10 上使用 Google Chrome 5.0.375.55 对我来说效果很好。 jsfiddle.net/pzjUt 和我看到的：img153.imageshack.us/img153/3521/resultm.png
更新：奇怪的是，新版本的 chrome (5.0.375.70) 再次打破了这一点，所以现在我的图像在每个单元格中重复......

标签： css background-image html-table tablerow

【解决方案1】：

好的，我花了很长时间阅读这方面的内容，但找不到适用于所有浏览器的简单修复方法，但我看到您使用的是固定高度的行，因此我开发了自己的解决方法：http://jsfiddle.net/DR8bM/

基本上，不是将背景图像放在行上，而是将其放在每行第一个单元格中的绝对定位 div 上（并将其展开以填充整行）。这有点 hacky，但可能是实现您想要的唯一可靠方法。

【讨论】：

【解决方案2】：

将 float:left 添加到该行，这应该可以修复它。

tr {float:left;}

【讨论】：

为我工作。解决了 chrome 和 safari 中的问题；没有引起任何问题，我可以在 Firefox 和 Internet Explorer 中看到（原来的问题不存在）
应用此修复程序时，我失去了所有列宽。仅当您预定义宽度时才有效！？
@blo0p3r 你是对的。但它是一种 flex 样式：See my codepen

【解决方案3】：

在 Windows 10 上的 Chrome 54 中测试：

tr {
  background-attachment: fixed;
}

虽然看起来并非没有错误 - 背景图像仅在加载时在整个视口中重复，这意味着向下滚动时出现的单元格没有背景。

【讨论】：

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