How to change the opacity of a card-block in bootstrap 4

have you tried using 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>

Turns out the bootstrap class .card was overriding the background opacity css style I was trying to set on .card-block regardless of whether I put !important keyword or not.

I was able to fix this by adding the background style to the card and just changing the individual opacities of the .card-header and .card-footer to 1.

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

please, try this:

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