Transparent Bootstrap Panel

Question

Ich habe this free bootstrap theme ausgewählt, und mein Problem ist, dass ich transparente Panels erstellen möchte, aber wenn ich opacity: 0.8; den Text im Panel, wird natürlich transparent, was ist nicht etwas, was ich gerne passieren würde. Ich habe versucht, diesen CSS-Code zu verwenden, aber es sieht so aus, als ob noch etwas hinter der Überschrift und dem Körper steckt und das Panel nicht transparent wird.

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

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

EDIT - Beispiel 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

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>