样式表具有带不透明文本的透明背景？

Question

我有一个自举表看起来像这样：

<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/