透明引导面板答案

【问题标题】：Transparent Bootstrap Panel透明引导面板
【发布时间】：2014-09-11 09:19:02
【问题描述】：

我选择了this free bootstrap theme，我的问题是我想创建透明面板，但是当我设置opacity: 0.8; 时，面板中的文本当然会变得透明，这不是我希望发生的事情.我尝试使用此 CSS 代码，但标题和正文后面似乎还有一些东西，并且面板没有变得透明。

.panel-transparent .panel-heading{
    background: rgba(122, 130, 136, 0.2)!important;
}

.panel-transparent .panel-body{
    background: rgba(46, 51, 56, 0.2)!important;
}

示例 HTML：

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap opacity transparent

【解决方案1】：

只需选择上面链接中提到的“bg-transparent”即可； https://getbootstrap.com/docs/4.1/utilities/colors/

这样的；

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title bg-transparent text-dark">Panel primary</h3>
  </div>
  <div class="panel-body bg-transparent text-white">
    Panel content
  </div>
</div>

并且一定不要忘记添加引导程序。

【讨论】：

这是一个边界线link-only answer。您应该在此处扩展您的答案以包含尽可能多的信息，并使用该链接仅供参考。

【解决方案2】：

.transparent{    
    background-color: rgba(0,0,0,0.15);
}

.panel{
    background-color: transparent;
    border: 1px #222;
}

<div class="panel panel-default">
     <div class="panel-heading">Título</div>
     <div class="panel-body transparent">                  
     </div>
</div>

【讨论】：

【解决方案3】：

CSS

    body {
        background:#c33;
    }

    .panel-transparent {
        background: none;
    }

    .panel-transparent .panel-heading{
        background: rgba(122, 130, 136, 0.2)!important;
    }

    .panel-transparent .panel-body{
        background: rgba(46, 51, 56, 0.2)!important;
    }

HTML

<div class="panel panel-primary panel-transparent">
  <div class="panel-heading">
    <h3 class="panel-title">Panel primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Example

【讨论】：

您还可以添加页脚以防您将来使用它！ .panel-transparent .panel-footer{ background: rgba(46, 51, 56, 0.2)!important; }