如何在 HTML/CSS 中设置数据单元格的背景？

Question

我正在尝试将每个数据单元格的背景图像设置为图像。当我使用如下所示的方法时，我只能得到照片的左上角。

如下图，我只是将每个数据单元格的背景设置为我选择的图像；但是，我假设需要对 class 进行更多样式设置。有人知道那是什么吗？

.example {
  background-image: url("https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg");
}

<table class="example">
  <tr>
    <td>
      <p> ONE </p>
    </td>
    <td>
      <p> TWO </p>
    </td>
  </tr>
</table>

Answer 1

首先，如果您想要单元格中的图像，您必须 select css 中的 td。然后，使用 background-size 确定图像的大小。

.example td {
  background-image: url("https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg");
  background-size: cover;
}

<table class="example">
  <tr>
    <td>
      <p> ONE </p>
    </td>
    <td>
      <p> TWO </p>
    </td>
  </tr>
</table>

How do I set the background of a data cell in HTML/CSS?