白色div背景显示为灰色

Question

我有一个内容div，显示一个图像和一个位于内容div顶部/顶部的标题。标题的原始背景（包含一些文本）是黑色的，具有一些不透明度，当用户将鼠标悬停在图像/标题上时，标题div的背景颜色和文本颜色变为白色/黑色。但是，我发现将背景设置为白色会导致灰色（不管不透明度）。我应该使用什么来获得不透明度以使用白色背景？附件是我正在做的CSS。 #textWrap（header w / text）位于#gameDisplayBugSmash（图像）内。

#gameDisplayBugSmash {
   height: auto;
   width: 50%;
   position: relative;
}

#gameDisplayBugSmash:hover #textWrap {
   background-color: white;
   color: #000;
}

#textWrap {
   background-color: rgba(0,0,0, .6);
   width: 100%;
   height: auto;
   z-index: 1;
   left: 0px;
   top: 0px;
   position: absolute;
   font-size: 16px;
   color: #FFF;
}


<div id = "contentSaver">
<div id = "contentGames"> 
<div id = "gameDisplayBugSmash">
<a href="#" onmouseout="MM_swapImgRestore()"         onmouseover="MM_swapImage('bugSmash','','images/bugSmashFaded.png',1)"><img src="images/PortII_DesignMocks-Recovered_0002s_0005_Layer-17-copy-3.png" width="100%" height="auto" id="bugSmash" /></a>
<div id = "textWrap">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <div id = "bugSmashTitle">Bug Smash</div>
    </td>
    <td>
    <div id = "bugSmashTextD">A final project for one of my coding classes. This was my introduction to using monogame for  development.</div>
   </tr>
    </table>

</div>
</div>
</div>