Html 使用悬停文本将td扩展到图像宽度100%

我尝试使用带有背景图像和透明文本的表格单元格，当您将鼠标悬停在背景图像（td单元格）上时，文本将显示在一个透明的黑框中

我如何让td单元扩展到背景图像的整个大小，宽度100%填充整个td

这是我的JS小提琴，我尝试了两种不同的方法（背景大小：包含；背景大小：封面；背景大小：100%自动；）：

编辑的CSS（仅包括问题-JSFIDLE包括所有）

.HomeBody2{
边界塌陷：塌陷；
保证金：0；
细胞间距：0；
细胞填充：0；
}
#家庭成员2{
宽度：100%；
边界塌陷：塌陷；
保证金：0；
细胞间距：0；
细胞填充：0；
}
.HomeBody2 h1{
字体系列：“Footlight MT Light”；
字体大小：56px；
字体大小：粗体；
保证金：0；
颜色：#062F4F；
右边填充：10px；
左侧填充：10px；
}
.homebody 2 h2{
字体系列：“格鲁吉亚”；
颜色：#FF3B3F；
字体大小：32px；
字体大小：粗体；
保证金：0；
填充顶部：10px；
右边填充：10px；
左侧填充：10px；
垫底：10px；
}
.HomeBody2p{
字体系列：“格鲁吉亚”；
字体大小：24px；
字体大小：无；
保证金：0；
颜色：透明；
填充顶部：10px；
右边填充：10px；
左侧填充：10px；
垫底：10px；
}
.HomeBody2A{
颜色：#FF3B3F；
字体系列：“格鲁吉亚”；
字体大小：24px；
字体大小：粗体；
文字装饰：下划线；
}
表td.原因：悬停{
边界塌陷：塌陷；
背景：url（“images/Money.jpg”）；
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
文本对齐：左对齐；
垂直对齐：居中；
}
表td.原因：悬停>p{
颜色：#FFFFFF！重要；
背景色：#000000；
不透明度：0.8；
}
表td.为什么{
边界塌陷：塌陷；
背景：url（“images/Money.jpg”）；
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
文本对齐：左对齐；
垂直对齐：居中；
}
表td.如何：悬停{
边界塌陷：塌陷；
背景：url（“images/PeopleWorking.png”）；
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
文本对齐：左对齐；
垂直对齐：居中；
}
表td.方法：悬停>p{
颜色：#FFFFFF！重要；
背景色：#000000；
不透明度：0.8；
}
表td.如何{
边界塌陷：塌陷；
背景：url（“images/PeopleWorking.png”）；
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
文本对齐：左对齐；
垂直对齐：居中；
}
通过为您的机构找到日常解决方案，减少行政负担。节省下来的每一美元都是花在分析和政策等其他重要任务上的一分钟

我们首先演示一个潜在的解决方案，通常由另一个联邦机构使用，因为我们的最佳解决方案是具有广泛适用性的解决方案。然后我们进入一个发现过程，确定你们机构的需求。在此基础上，我们构建一个原型，完善并重申该原型，并在机构满意后进行测试。在进一步细化之后，该解决方案将进入一个试点项目，然后进入一个实时生产环境以获得最终结果。我们在敏捷环境中工作，这意味着新的解决方案总是指日可待，为当前和潜在客户提供能力

是否可以将示例代码缩减到演示问题所需的最小尺寸？我相信你不需要那么多行css。我不确定我是否完全理解-看看td在这个-->中的原因和方式-->这就是你将图像设置为td大小的意思吗？还是和你想要的文字有关…？嗨，Ovokuro，有点。理想情况下，我希望在td中显示其中一个单元格的完整图片（即，如何图片为td的100%，并剪掉部分为什么图片），而无需在文本上方和下方添加
，以扩展td以显示更多图片。谢谢

.HomeBody2 {
  border-collapse: collapse;
  margin: 0;
  cellspacing: 0;
  cellpadding: 0;
}

#HomeBody2 {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  cellspacing: 0;
  cellpadding: 0;
}

.HomeBody2 h1 {
  font-family: "Footlight MT Light";  
  font-size: 56px;
  font-weight: bold;
  margin: 0;
  color: #062F4F;
  padding-right: 10px;
  padding-left: 10px;
}

.HomeBody2 h2 {
  font-family: "Georgia"; 
  color: #FF3B3F; 
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  padding-top: 10px;  
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.HomeBody2 p {
  font-family: "Georgia";  
  font-size: 24px;
  font-weight: none;
  margin: 0;
  color: transparent;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.HomeBody2 a {
  color: #FF3B3F;
  font-family: "Georgia";  
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
}

table td.Why:hover {
  border-collapse: collapse;
  background: url("images/Money.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: center;
}

table td.Why:hover > p {
  color: #FFFFFF !important;
  background-color: #000000;
  opacity: 0.8;
}

table td.Why {
  border-collapse: collapse;
  background: url("images/Money.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: center;
}

table td.How:hover {
  border-collapse: collapse;
  background: url("images/PeopleWorking.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: center;
}

table td.How:hover > p {
  color: #FFFFFF !important;
  background-color: #000000;
  opacity: 0.8;
}

table td.How {
  border-collapse: collapse;
  background: url("images/PeopleWorking.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: center;
}


  <table class="HomeBody2" width="100%">
    <tbody>
      <tr>
        <td class="Why" width="33.5%">
          <p>Spend less on administrative burdens by finding everyday solutions for your agency. Every dollar saved is a minute spent on other important tasks like analysis and policy.</p>
        </td>
        <td class="How" width="66.5%">
          <p>We start with a demonstration of a potential solution, often one used by another Federal agency, since our best solutions are ones that have broad applicability. Then we move into a discovery process, determining your agency's needs. From there, we build a prototype, refine and reiterate that prototype, and enter testing once the agency is satisfied. Following more refining, the solution enters a pilot project, then moving into a live production environment for the end results. We work in an agile environment, meaning new solutions are always around the corner, offering capabilities to current and potential clients.</p>
        </td>
      </tr>
    </tbody>
  </table>