Bootstrap 样式表具有透明背景和不透明文本?

z9ju0rcb  于 11个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(178)

我有一个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

iyfamqjs

iyfamqjs1#

使用以下样式:

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 Fiddle:http://jsfiddle.net/Lf9LG/

zxlwwiss

zxlwwiss2#

:更新- 2023 - BootStrap v5.3:
添加到上面-得到一个透明的背景表,我必须应用一个单独的类(在您的css文件)如下;

.table_custom { --bs-table-bg: transparent !important; }

字符串
将此“table_custom”添加到代码中的表标记中,如下所示;

<table class="table table-sm table_custom">


一个透明背景的小表格。

相关问题