你好我有一个由div制作的表，并将显示设置为table，table-row，table-cell . 在这些表格单元格（nth-child（1）除外）上，我有一个灰色线条的背景图像，我将其设置为整个单元格，如下面的屏幕截图所示 . 现在这对我来说有点先进的CSS技术，因为我不是一个真正的网页设计师，而是一个软件工程师但是我需要将行的背景颜色变为灰色，因为图像的背景是白色的，但事实并非如此 . 如果我没有解释清楚，下面的截图显示了所需的效果 . 我的问题仅仅是基于我如何做HOVER效应 .

我的HTML代码示例是这样的

<div class="tableName">
 <div class="tableRow">
  <div class="tableCell">
   <span><!--random data --></span>
  </div>
  <div class="tableCell">
   <span><!--random data --></span>
  </div>
 </div>
</div>

我的css代码如下

.trafficTable{
   display:table;
   border-collapse: collapse;
   width:100%;
 }
.trafficRow{
   display:table-row;
   width:100%;
}
.trafficRow:nth-child(1){
  color:#FFFFFF;
}
.trafficCell{
  display:table-cell;
  border:1px solid #b3b3b3;
  text-align:center;
  vertical-align: middle;
  width:13.5%;
  font-size:13px;
  background-image:url("/images/strike.png");
  background-size:100% 100%;
  background-color:#424F90;
  cursor:pointer;
 }
 .trafficCell:nth-child(1){
   width:5%; 
  background-image: none !important;
  color:#FFFFFF;cursor:default;
}
 .trafficRow:nth-child(1) .trafficCell{
   background-color:#F79B2E !important;
   background-image: none !important;
   cursor:default;
 }
 .trafficRow:nth-child(1) .trafficCell:hover{
    background-color:#F79B2E !important;
 }
  .trafficRow:nth-child(1):hover{
     background-color:#F79B2E !important;
 }
  .trafficCell:hover{background-color:#BA0C2F !important;}
  .trafficCell:nth-child(1):hover{background-color:#424F90 !important;}
  .trafficRow:hover::before{
    background-color:#e6e6e6 !important;
    content: '';
    height:100%;
    width:100%;
    display:block;
  }


  .trafficCell span{
    display:inline-block;
    min-height: 182px; 
    width:100%;
   font-weight:900;
 }

请注意，显然类名与css名称匹配 . 答案一定不能用不透明度来做 . 我已经尝试了很多东西，包括我在这里找到的技术（唯一一个关于我最接近这个场景的方法）和:: before伪选择器，仍然没有用 .

所承诺的效果截图如下：Desired Effect

编辑：我想人们会误解我的问题 . 屏幕截图中显示的所需效果显示了对HOVER的所需效果 . 我知道你不能将表格单元格悬停，直到CSS4出来并且父选择器已经出来，这就是为什么我会用javascript / jquery做的，基本上我要问的是为什么背景颜色会被背景img覆盖，即使是图像的背景是白色所以它不应该有任何影响???

html css