title: Attemting to make a panel transparent in collapsable for bootstrap 3
body: <p>I have this bit of html (I am using bootstrap 3.4.1):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Forsaken Isles&lt;/title&gt;
      &lt;!-- Compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="CSS/FSWeb.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=UnifrakturMaguntia&amp;display=swap" rel="stylesheet"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- DOCUMENTATION NAVBAR --&gt;
  
      &lt;nav class="navbar navbar-default navbar-inverse"&gt;
  
        &lt;!-- Inside of a Container --&gt;
      &lt;div class="container-fluid"&gt;
  
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;!-- This is the actual code that create the "hamburger icon" --&gt;
        &lt;!-- The data-target grabs ids to put into the icon --&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
          aria-expanded="false"&gt;
  
            &lt;!--  Code for the hamburger icon--&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;a class="navbar-brand font" href="Link.html"&gt;
            LINK&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;!-- Anything inside of collapse navbar-collapse goes into the "hamburger" --&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="Link.html"&gt;LINK&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Link.html"&gt;LINK&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Link.html"&gt;LINK&lt;/a&gt;&lt;li&gt;
            &lt;li&gt;&lt;a href="Link.html"&gt;LINK&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- Stuff on the Right --&gt;
          &lt;!--user name and password with submit button --&gt;
          &lt;form class="navbar-form navbar-right" role="password"&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control" placeholder="Password"&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;form class="navbar-form navbar-right" role="username"&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control" placeholder="Username"&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
    &lt;/nav&gt;
  
  
    &lt;!-- OTHER STUFF ON THE PAGE --&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="jumbotron"&gt;
        TEXT
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;h2 class="format font"&gt;Feats and Traits:&lt;/h2&gt;
      &lt;p class="format"&gt;
        TEXT
      &lt;/p&gt;
      &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
            &lt;h4 class="panel-title format font"&gt;
              &lt;a role="button" data-toggle="collapse" data-parent="#accordion"
              href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"&gt;
                TEXT
              &lt;/a&gt;
            &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
          aria-labelledby="headingOne"&gt;
            &lt;div class="panel-body"&gt;
              &lt;p class="format"&gt;
                 PARAGRAPH TEXT
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Need to have JQuery and Javascript for DropDown Actions to work --&gt;
  
    &lt;script src="http://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>Inside this I am trying to make the collapse-able panel containing 'PARAGRAPH TEXT' to be transparent, so that it shows the background image of the body underneath. The best I can do, as you can see below in the CSS, is set the background of the panel to a solid black. Efforts to add opacity to it only changes the color form shades of gray, and attempts to set background-color to some rbga just ends up making the panel completely white.</p>
  
  <p>My google-fu finds <em>loads</em> of questions and examples on how to make Nav-bar transparent, but not collapsible panels. I assume this is possible, I'm just not seeing it</p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.panel{
    border-style: hidden
  }
  
  .panel-collapse{
    background: #000000
  }
  
  .panel-default &gt; .panel-heading{
    background-color: #761601;
  }
  
  .panel-group .panel-heading + .panel-collapse &gt; .panel-body{
    border-style: hidden
  }
  
  .panel-title{
    background-color: #761601
  }
  
  .font{
    font-family: 'UnifrakturMaguntia', cursive;
  }
  
  .format{
    text-align: center;
    color: #FFFFFF
  }
  
  body{
    background-image: url(file:///C:/FSWebsite/Images/blueforest.jpg)
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Edited for a Fiddle script.</p>
  
  <p><a href="https://jsfiddle.net/nt32zcLo/1/" rel="nofollow noreferrer">https://jsfiddle.net/nt32zcLo/1/</a></p>