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/

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

1 个答案: