Comment changer l'opacité d'un bloc de cartes dans bootstrap 4

Question

Hey je viens d'avoir un simple composant Card Bootstrap 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> 

Ce que je voulais accomplir était d'avoir l'en-tête et pied de page avec une opacité de 1, mais le bloc avec une opacité de 0,4. J'ai essayé d'utiliser rbga dans le style couleur de fond sans chance

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

Answer 1

Active la classe de bootstrap .card a été l'opacité impérieuses fond style css je en train de mettre sur .card bloc indépendamment du fait que je mets! Mot-clé important ou pas.

j'ai pu résoudre ce problème en ajoutant le style de fond à la carte et en changeant seulement les individuels opacités du .card-tête et. carte de bas de page à 1.

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

Answer 2

avez-vous essayé d'utiliser 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

Votre ok semble css. Je pense que le problème est que votre fichier d'amorçage est en train de surcharger votre code. Essayez ceci pour remplacer le code bien que je ne vais pas vous suggérons d'utiliser! Important

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

Se reporter à this link pour enchevêtrements. Sa spécificité appelée