如何让文本显示在表格中的图像上？答案

【问题标题】：How to get text to display over images in a table?如何让文本显示在表格中的图像上？
【发布时间】：2021-09-04 08:03:33
【问题描述】：

我试图让文本显示在每个单独的图像上，但我不知道为什么它根本不显示。据我所知，我没有隐藏文本或任何内容，只是没有显示在相应图像的顶部。

我对 html/css 很陌生，所以我很容易错过一些非常明显的东西。

<html>
<body>
<table class="index">
<tr>
    <td>
        <img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
        Care guides
    </td>
    <td>
        <img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
        Propagation
    </td> 
    <td> 
        <img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
        Troubleshooting
    </td>
</tr>
<tr>
    <td>
        <img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
        Easy plants
    </td>
    <td>
        <img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
        Pilea
    </td> 
    <td>
        <img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
        Pets & plants
    </td>
</tr>
</table>
</body>
</html>

table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}

table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}

table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}

div.index {
width: 100%;
}

【问题讨论】：

标签： html css image text

【解决方案1】：

你应该把你的文本放在一个 HTML 元素中，例如 p 标签：<p>Easy plants</p>

给p元素一个相对位置：position: relative;

这会将其定位在绝对定位的图像上。如果您以后碰巧更改了图像和文本元素的顺序，则应为文本元素赋予比图像更高的 z-index 值。

【讨论】：

【解决方案2】：

将z-index: -1; 添加到您的table.index td img 选择器中，它将把图像放在您想要的任何东西的后面。

但是，这不适用于将background-color: #575151; 设置为您的table.index td

我已经包含了一个有效的 sn-p（带有替代图像）供您尝试

编码愉快:)

table.index {
  table-layout: fixed;
  border-spacing: 25px 35px;
  font-size: 20px;
  color: #575151;
  padding-left: 180px;
  padding-right: 180px;
}

table.index td {
  height: 220px;
  width: 360px;
  min-width: 200px;
  position: relative;
  border: 1px solid black;
  /*background-color: #575151; commented this out*/
  vertical-align: middle;
  text-align: center;
}

table.index td img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

div.index {
  width: 100%;
}

<table class="index">
  <tr>
    <td>
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Magnificent_sunrise.jpg"> Care guides
    </td>
    <td>
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Magnificent_sunrise.jpg"> Propagation
    </td>
    <td>
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Magnificent_sunrise.jpg"> Troubleshooting
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Magnificent_sunrise.jpg"> Easy plants
    </td>
    <td>
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Magnificent_sunrise.jpg"> Pilea
    </td>
    <td>
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Magnificent_sunrise.jpg"> Pets & plants
    </td>
  </tr>
</table>

【讨论】：