29

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

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

4

3 回答 3

11

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

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

于 2010-06-16T11:06:31.683 回答
4

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

tr {float:left;}
于 2011-08-04T01:00:58.337 回答
2

在 Windows 10 上的 Chrome 54 中测试：

tr {
  background-attachment: fixed;
}

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

于 2016-11-02T12:03:48.470 回答