So ändern Sie die Deckkraft eines Kartenblocks im Bootstrap 4

Question

Hey ich habe nur eine einfache Card Bootstrap 4-Komponente. das Kopf- und Fußzeile, um mit einer Opazität von 1, aber der Block mit einer Opazität von .4

<div class="card"> 
    <div class="card-header">This is my header</div> 
    <div class="card-block">This is my block</div> 
    <div class="card-footer">This is my footer</div> 
</div> 

Was ich erreichen wollte. Ich habe versucht, im Hintergrund-Farbe Stil verwenden RGBA ohne Glück

.card-block { background-color: rgba(245, 245, 245, 0.4); } 

Answer 1

Stellt sich heraus, die Bootstrap-Klasse .card wurde das Überschreiben der Hintergrundopazität CSS-Stil, den ich auf .card-Block unabhängig davon einzustellen versuchte, ob ich setzen! Wichtiges Stichwort oder nicht.

konnte ich dieses Problem beheben, indem Sie den Hintergrundstil auf die Karte hinzufügen und nur die einzelnen Trübungen des .card-header und Wechsel. Karte-footer bis 1.

.card { background-color: rgba(245, 245, 245, 0.4); } 
.card-header, .card-footer { opacity: 1} 

Answer 2

haben Sie versucht, mit opacity

.special-card { 
 
/* create a custom class so you 
 
    do not run into specificity issues 
 
    against bootstraps styles 
 
    which tends to work better than using !important 
 
    (future you will thank you later)*/ 
 

 
    background-color: rgba(245, 245, 245, 1); 
 
    opacity: .4; 
 
}

<div class="card"> 
 
    <div class="card-header">This is my header</div> 
 
    <div class="card-block special-card">This is my block</div> 
 
    <div class="card-footer">This is my footer</div> 
 
</div>

Answer 3

CSS ok aussieht. Ich denke, das Problem ist, dass Ihre Bootstrap-Datei Ihren Code überschreibt. Versuchen Sie dies den Code zu überschreiben, obwohl ich mit vorschlagen würde nicht! Important

.card-block { background-color: rgba(245, 245, 245, 0.4) !important; } 

Siehe this link für die übergeordneten. Seine genannte Spezifität