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

z9ju0rcb  于 2024-01-04  发布在  Bootstrap
关注(0)|答案(2)|浏览(235)

我有一个Bootstrap表,看起来像这样:

  1. <table class="table table-striped table-condensed table-bordered">
  2. <tr>
  3. <th>User</th>
  4. <th>Points</th>
  5. </tr>
  6. <tr>
  7. <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td>
  8. <td class="active">{{player.points}}</td>
  9. </tr>
  10. </table>

字符串
在我的CSS中,我尝试通过以下方式使表透明:

  1. table{
  2. opacity: 0.3;
  3. }


这显然使整个表透明。我怎么能只使背景透明呢?我试着改变background-color:rgba(),但这也不起作用。
感谢您的任何帮助!
~Carpetfizz

iyfamqjs

iyfamqjs1#

使用以下样式:

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

字符串
你需要改变rgb部分来匹配你的颜色。属性中的最后一个参数是alpha设置,它将使背景透明。
您还必须调整html以正确放置结束表格标记。

  1. <table class="table table-striped table-condensed table-bordered">
  2. <tr>
  3. <th>User</th>
  4. <th>Points</th>
  5. </tr>
  6. <tr>
  7. <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td>
  8. <td class="active">{{player.points}}</td>
  9. </tr>
  10. </table>

JS Fiddle:http://jsfiddle.net/Lf9LG/

展开查看全部
zxlwwiss

zxlwwiss2#

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

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

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

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


一个透明背景的小表格。

相关问题