我们可以通过chrome在多单元格表格中解决表格行背景图像问题吗？

它经常被问到 - 但我还没有看到一个很好的答案（我看了）。如果您将CSS中的背景图像设置为表格行，则图像会在每个单元格中重复出现。如果你设置position: relative（对于行）并设置background-image: none（对于单元格），它可以解决IE上的问题，但不能在Chrome上解决问题！我无法使用背景定位，因为有很多呼叫，它们的大小各不相同。（和图片不symmetrical-这是一个褪色从一侧出任何人??我们可以通过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是基本 - 一种多细胞表

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

来源

2010-06-08 Ya' el

你有一个活的例子或一些源标记/ css？ – Kyle 2010-06-08 13:06:28

似乎Firefox是唯一一款表现得应该如此的浏览器。 Chrome，IE，Opera和Safari都会导致背景图像在每个单元格中重新启动，而不是整个行都很好地不间断地流动。此问题在http://code.google.com/p/chromium/issues/detail?id=44361上列出，但看起来不会被修复。 – 2010-06-09 05:22:29

在Ubuntu 9.10上，使用Google Chrome 5.0.375.55对我来说工作得很好。 http://jsfiddle.net/pzjUt/和我看到的：http://img153.imageshack.us/img153/3521/resultm.png – jackocnr 2010-06-09 17:39:08

好吧，我花了很多时间阅读这个，并找不到所有浏览器的简单修复，但作为我看到你正在使用固定高度的行，我已经开发了我自己的解决方法：http://jsfiddle.net/DR8bM/

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

来源

2010-06-16 11:06:31 jackocnr

这真的帮助了我！非常感谢！！ – Soph 2012-01-18 18:51:04

添加浮动：留在行中，应该修复它。

tr {float:left;}

来源

2011-08-04 01:00:58 Aziz

为我工作。解决了铬和Safari浏览器中的问题;没有引起任何问题，我可以看到，在Firefox和Internet Explorer（原始问题不存在） – that0th3rGuy 2012-05-10 12:21:18

应用此修复程序时，我失去了所有列宽。只有你有你预先设定的宽度时才会有效！ – blo0p3r 2013-06-28 16:05:15

@ blo0p3r你说得对。但它是一种flex风格：[看我的codepen]（http://codepen.io/HerrSerker/pen/JEvHA） – HerrSerker 2014-07-08 14:42:53

测试在Chrome 54在Windows 10：

tr { 
    background-attachment: fixed; 
}

虽然现在看来，这不是没有缺陷 - 背景图像只重复整个视在加载时，这意味着细胞时出现向下滚动不具备背景。

来源

2016-11-02 12:03:48 davidanton1d

底部的评论最终帮助了我，谢谢！ – Ecko 2018-02-28 21:58:55

我们可以通过chrome在多单元格表格中解决表格行背景图像问题吗？

回答

相关问题