Pannello di bootstrap trasparente

Question

Ho scelto this free bootstrap theme e il mio problema è che voglio creare pannelli trasparenti, ma quando imposto lo opacity: 0.8; il testo nel pannello, ovviamente, diventa trasparente, il che non è qualcosa che mi piacerebbe accadere. Ho provato a utilizzare questo codice CSS, ma sembra che ci sia ancora qualcosa dietro l'intestazione e il corpo e il pannello non diventa trasparente.

.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 - HTML di esempio:

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