樣式表有透明背景和不透明文本？

Question

我有一個Bootstrap表，如下所示：

<table class="table table-striped table-condensed table-bordered">  
<tr>
<th>User</th>
<th>Points</th>
</tr>
<tr>
  <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td>
  <td class="active">{{player.points}}</td>
</tr>
</table>

在我的CSS中，我試圖通過以下方式使表格透明：

table{
    opacity: 0.3;
     }

這顯然使整個表格透明。 我怎樣才能使背景透明？ 我嘗試更改background-color:rgba() ，但這也不起作用。

謝謝你的幫助！

〜Carpetfizz

Answer 1

使用以下樣式：

table tr td, table tr th{
    background-color: rgba(210,130,240, 0.3) !important;
}

您需要更改rgb部分以匹配您的顏色。 屬性中的最后一個參數是alpha設置，它將使背景透明。

您還必須調整html以正確放置結束表標記。

<table class="table table-striped table-condensed table-bordered">  
<tr>
<th>User</th>
<th>Points</th>
</tr>
<tr>
  <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td>
  <td class="active">{{player.points}}</td>
</tr>
</table>

JS小提琴： http ： //jsfiddle.net/Lf9LG/