title: Transparent Bootstrap Panel
body: <p>I have picked <a href="http://bootswatch.com/slate/" rel="nofollow noreferrer">this free bootstrap theme</a>, and my problem is that I want to create transparent panels, but when I set <code>opacity: 0.8;</code> the text in the panel, of course, gets transparent, which is not something I would like to happen. I tried using this CSS code, but it looks like there is still something behind the heading and body and the panel doesn't become transparent.</p>
  <pre><code>.panel-transparent .panel-heading{
      background: rgba(122, 130, 136, 0.2)!important;
  }
  
  .panel-transparent .panel-body{
      background: rgba(46, 51, 56, 0.2)!important;
  }
  </code></pre>
  <p>Sample HTML:</p>
  <pre><code>&lt;div class=&quot;panel panel-primary&quot;&gt;
    &lt;div class=&quot;panel-heading&quot;&gt;
      &lt;h3 class=&quot;panel-title&quot;&gt;Panel primary&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
      Panel content
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>