为什么此表格行背景图像消失在表格单元格后面？答案

【问题标题】：Why is this table row background image disappearing behind the table cell?为什么此表格行背景图像消失在表格单元格后面？
【发布时间】：2020-06-10 15:13:50
【问题描述】：

这让我很难过。我在 tr 上设置背景图像。由于某种原因，它消失在第 4 列。更奇怪的是，它消失在后面的列取决于表格的宽度。

我很确定我遗漏了一些显而易见的东西。

Edit：background-repeat: repeat; 不会发生这种情况。
Edit2：添加了 100% 宽度的示例以证明这与实际无关表格宽度。
Edit3：刚刚检查了几个浏览器。这只发生在 Chrome 和 Opera 中。 Firefox 和 Edge 不受影响。所以bug？

谁能解释一下？

.data-table {
  width: 600px;
}

tr.ticket-rows {
  background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
  background-position: 200px -50px;
  background-repeat: no-repeat;
}

tr, td {
  background-color: transparent;
  height: 100px
}

<table class="data-table">
  <tbody>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
  </tbody>
</table>

.data-table {
  width: 100%;
}

tr.ticket-rows {
  background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
  background-position: 300px -50px;
  background-repeat: no-repeat;
}

tr, td {
  background-color: transparent;
  height: 100px
}

<table class="data-table">
  <tbody>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
  </tbody>
</table>

https://codepen.io/franatec/pen/yLeeKzr?editors=1100

【问题讨论】：

很奇怪，这对我来说也是新的。以下是一些可能的解决方案stackoverflow.com/questions/25312482/background-image-on-tr
您希望发生什么？
@Ted Whitehead，对该帖子的评论说“W3C 说你不能在标记上放置背景图像”这可以解释它，尽管我无法找到实际的参考在 w3schools 或 Mozilla 文档中。我可能会考虑 div hack。只是希望我了解这种行为的来源。
@j08691，无论背景图像在行中的位置如何，我都希望它可见。
@TedWhitehead，这似乎是一个错误。我已经向 chromium.org 提交了一份报告。

【解决方案1】：

如果我猜对了，你想要在你的 tr 后面放一张图片，你可以添加 background-size: cover 来解决这个问题，但它看起来很奇怪！

.data-table {
  width: 600px;
}

tr.ticket-rows {
  background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

tr, td {
  background-color: transparent;
  height: 100px;
}

<table class="data-table">
  <tbody>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
  </tbody>
</table>

【讨论】：