Saydam Önyükleme Paneli

Question

this free bootstrap theme'u seçtim ve sorunum şeffaf paneller oluşturmak istediğim, ancak paneldeki metni opacity: 0.8; ayarladığımda, elbette şeffaf oluyor, ki bu olmasını istediğim bir şey değil. Bu CSS kodunu kullanmayı denedim, ancak hala başlığın ve vücudun arkasında bir şey var gibi görünüyor ve panel şeffaflaşmıyor.

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

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

DÜZENLEME - Örnek 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>