如何在表格单元格中的图像上放置文本？

<table>
  <tr>
    <td style="background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center; text-align: center;">
      文本内容
    </td>
  </tr>
</table>

<table>
  <tr>
    <td class="cell-with-image">
      文本内容
    </td>
  </tr>
</table>

<style>
  .cell-with-image::before {
    content: "";
    display: inline-block;
    width: 100px; /* 图像宽度 */
    height: 100px; /* 图像高度 */
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

<table>
  <tr>
    <td class="cell-with-image">
      <img src="image.jpg" alt="图像">
      <span class="text">文本内容</span>
    </td>
  </tr>
</table>

<style>
  .cell-with-image {
    position: relative;
  }
  
  .cell-with-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px; /* 图像宽度 */
    height: 100px; /* 图像高度 */
  }
  
  .cell-with-image .text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>