web-dev-qa-db-fra.com

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

Hey j'ai juste un composant simple 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 le 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 de couleur de fond sans succès

.card-block { background-color: rgba(245, 245, 245, 0.4); }
csstwitter-bootstrapopacitybootstrap-4twitter-bootstrap-4
3
Luke Flournoy

Il s'avère que la classe bootstrap .card était en train de remplacer le style CSS d'opacité de fond que j'essayais de définir sur .card-block , que je mette un mot clé important ou non. 

J'ai pu résoudre ce problème en ajoutant le style d'arrière-plan à la carte et en modifiant simplement le opacités du .card-header et . card-footer en 1.

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

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>

5
happymacarts

s'il vous plaît, essayez ceci:

<div class="card-transparent">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card" style="background-color: rgba(245, 245, 245, 0.4); ">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>
0
Jorge Opazo

l'opacité est différente de la couleur d'arrière-plan. L'opacité détermine la translucidité de l'élément et la couleur d'arrière-plan ne la définit que pour la couleur de l'arrière-plan.

Cela peut sembler similaire mais ils sont très différents.

Le gros problème est que l'opacité rendra le texte des images et des éléments enfants également translucide, mais la couleur de fond n'affectera que le col ... oh, vous l'obtenez;)

0
jayenne

Votre css semble bien. Je pense que le problème est que votre fichier bootstrap écrase votre code ..__ Essayez ceci pour écraser le code bien que je ne suggère pas d'utiliser! Important

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

Reportez-vous à ce lien pour la priorité. On appelle sa spécificité

0
Malcolm Vaz

Voici ce qui a fonctionné avec moi (en utilisant des variables sass personnalisées que j'ai créées) pour modifier les couleurs de fond, etc. à l'intérieur de l'accordéon:

::ng-deep div.card-header:hover {
background-color: var(--subtle-gray);
}

::ng-deep div.card-header a {
background-color: var(--accent);
text-decoration: none !important;
}

::ng-deep div.card-body {
background-color: var(--subtle-gray);
}
0
codeherlife