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>

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

手机上的桌子图片：http://prntscr.com/jtudjt

Answer 1

这可能与您尝试为背景提供1或0.5的alpha值这一事实有关，但为了使其生效，您必须使用{{1而不是rgba

希望有所帮助！

背景颜色在手机上消失

1 个答案: