CSS/WebKit: 表格行的背景图片

Question

由于某些原因，在Safari和Chrome中将背景图像应用于tr时，它会呈现为规则适用于每个td的效果。

火狐：

_{(来源: whyprime.com)}

Safari:

_{(来源: whyprime.com)}

我发现了一篇讨论解决方法的文章:

将背景图片应用于表格行

我使用间隔GIF图像在Internet Explorer中使其工作，但是我无法弄清楚如何在Safari中实现。

http://www.whyprime.com/temp/table-background.html

- Jason Keene

---

你的代码在哪里？ - Azeem.Butt

Answer 1

您可以使用 "background-attachment : fixed" 来解决此问题。

<table>
  <tr class="bg">
    <td></td>
    <td></td>
  </tr>
</table>

在 CSS 中

tr.bg {
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px;
    background-attachment: fixed;
}

它有效！

- YellowMart

---

你有没有用过这个滚动条？挺有趣的。 - yunzen

谢谢您的想法。我花了一周时间寻找好的解决方案来实现渐变背景tr表格。谢谢您。 - Peter

这个救了我的 fkn 生命。我爱你。 - dessalines

请将以下与编程有关的内容从英语翻译成中文。 仅返回翻译的文本：这应该被标记为答案，因为它不依赖于解决方法。 - mga

这将图像固定到页面的背景，而不是表格行。因此，适用于例如没有特定起始或结束的重复模式，但不适用于需要与表格本身对齐的任何背景。 - Justin Wignall

Answer 2

默认情况下，TR和TD的display属性为table-cell和table-row。我们需要让它们忘记这一点，像简单的块元素一样显示：

tr {display: block;}
td {display: inline-block; background: transparent;}

这段代码解决了我渲染问题。

- Slavyansk on Kuban

---

感谢这完美的修复，除此之外还加上了 Webkit @media CSS hack。'@media screen and (-webkit-min-device-pixel-ratio:0) { tr {display: block;} td {display: inline-block;width:195px } }' - Jamie

谢谢你的解决方案在我们的CSS上非常出色，它节省了我很多时间。 - php.khan

Answer 3

您的表格是否总是只有两行？例如：

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

如果是这样的话，一个简单但不太优雅的解决方案是将您的背景图像分成两个图像，并将CSS类应用于左列和右列，在左列的右侧和右列的左侧应用箭头的一半：

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

你的CSS可能类似于：

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

您还可以使用雪碧图，其中您可以使用一张图片并在两个背景上以不同的位置放置它。

我意识到这可能不是最理想的解决方案，但至少可以解决您的问题并推动项目进展。我有时会使用诸如此类的简单解决方案来实现前进的进展，然后再回顾问题以使其更加高效。

- KP.

---

啊，我想这可能是您传统上为表格设置背景图像的方式。自从我最后一次认真地使用切片背景等样式来装饰表格以来已经过了很长时间，我甚至没有考虑过这个方法。我能够通过使用x / y值定位背景来缓解Webkit浏览器中的显示问题，但在未来，我会采用这种方法，并使用JavaScript动态应用适当的背景样式，以保持标记的清晰简洁。对于您提供的良好建议和实用性解决方案，我会把它标记为已回答。谢谢，兄弟！ - Jason Keene