javascript - 背景颜色在手机上消失

Question

我使用 html/css 构建了一个表格。此表格的背景颜色在桌面环境中显示得很好，但当我通过手机查看同一站点时却不是这样。

在手机上，此表格的背景颜色是完全透明的，但表格中的文本显示得很好。

另外，如果这有什么不同的话，我正在为这个网站使用 Bootstrap 4。我认为这可能是 css 出于某种原因干扰了 bootstrap css，但即使使用 !important; 仍然会出现此问题；

CSS:

#beatsTable tr {
    background-color:rgb(123, 126, 132, 1) !important;
    padding:10px;
    padding:10px;
}

#beatsTable tr:not(:nth-child(2)):hover {
    background-color:rgb(55, 56, 58, 0.5);
}

#beatsTable td {
    color:gray;
    padding:10px;
    color:white;
}

#beatsTable th {
    padding:10px;
    background-color:rgb(17, 17, 17, 0.5);
    border-bottom:1px solid rgb(46, 204, 57, 0.5);
    border-top:1px solid rgb(46, 204, 57, 0.5);
    font-size:15px;
}

HTML:

<!-- <center><img src="media/beatLab.png"></img></center> -->

  <table style="color:white" id="beatsTable">
  <tr>
    <div class="musicPlayerContainer">

    </div>
  </tr>
  <tr>

    <th>Title</th>
    <th>Time</th> 
    <th>Bpm</th>
    <th></th>
  </tr>
  <tr>
    <td>Name1</td>
    <td>3:12</td> 
    <td>120</td>
    <td><div class="buyBtn" data-toggle="modal" data-target="#purchaseModal">Buy</div></td>
  </tr>
  <tr>
    <td>Name2</td>
    <td>4:20</td> 
    <td>153</td>
    <td><div class="buyBtn" data-toggle="modal" data-target="#purchaseModal">Buy</div></td>
  </tr>
  <tr>
    <td>Name3</td>
    <td>6:09</td> 
    <td>100</td>
    <td><div class="buyBtn" data-toggle="modal" data-target="#purchaseModal">Buy</div></td>
  </tr>
  </table>


</div>

桌面上的 table 图片:http://prntscr.com/jtud8h

手机上的 table 图片:http://prntscr.com/jtudjt

Answer 1

这可能与以下事实有关:您试图为背景赋予 1 或 0.5 的 alpha 值，但为了使其生效你必须使用 rgba 而不是 rgb

希望对您有所帮助!