我们可以解决 Chrome 中的多单元格表格中的表格行背景图像问题吗？
人们经常问这个问题，但我还没有看到一个好的答案（我也看了）。如果您在 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 是基本的 - 多单元格表格。
目标是让不同的颜色淡入每一行，但它可以可以是任何非图案图像。
It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the background-image: none (for the cells) it solves the problem on IE but not on chrome! I can't use background positioning since there are many calls and their size varies. (And the picture is not symmetrical- It's a fade out from one side. Anybody??
Example for the css code :
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; }
The HTML is basic - A multi cell table.
The goal is to have different colors fade into every row, but it could be any non-pattern image.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，我花了很长时间阅读此内容，但找不到适用于所有浏览器的简单修复方法，但正如我看到您使用的是固定高度行，我开发了自己的解决方法： http://jsfiddle.net/DR8bM/
基本上，不是将背景图像放在行上，而是将其放在第一个绝对定位的 div 上每行的单元格（并将其展开以填充整行）。这有点老套，但可能是实现您想要的目标的唯一可靠方法。
Ok, I spent ages reading about this, and couldn't find an easy fix for all browsers, but as I see you are using fixed height rows, I've developed my own workaround: http://jsfiddle.net/DR8bM/
Basically, instead of putting the background image on the row, you put it on an absolute-positioned div in the first cell of each row (and expand it to fill the whole row). This is slightly hacky, but may be the only reliable way to achieve what you want.
将 float:left 添加到该行，应该可以修复它。
Add float:left to the row, that should fix it.
在 Windows 10 上的 Chrome 54 中进行测试：
虽然看起来并非没有错误 - 背景图像仅在加载时在整个视口中重复，这意味着向下滚动时出现的单元格没有背景。
Tested in Chrome 54 on Windows 10:
Though it seems it's not without bugs - the background image only repeats throughout the viewport at loadtime, which means that the cells that appear when you scroll down doesn't have the background.