使用悬停文本将td扩展为图像宽度100％

Question

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

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

这是我的JS小提琴，我尝试了两种不同的方法（background-size：contains; background-size：cover;和background-size：100％auto;）： https://jsfiddle.net/wpdyjLgd/#&togetherjs=Bp5OxozhEt

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

.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>