css - 透明 Bootstrap 面板

Question

我选择了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>

Answer 1

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