2014-07-20 17 views
13

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.Pannello di bootstrap 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> 
+0

potete inserire HTML di esempio? – Mooseman

risposta

21

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

+0

Grazie, funziona come un fascino! :) – user3127242

+0

Si potrebbe anche aggiungere il piè di pagina nel caso in cui lo si utilizzerà in futuro! '.panel-transparent .panel-footer { background: rgba (46, 51, 56, 0.2)! importante; } ' – auslander

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