How to apply opacity only for mat-card, but not for the rest of the content inside mat-card?

Question

I have a few mat-card which are flexbox items. I want a card itself to be a little transparent opacity: 0.8; . But the rest elements inside stay as they are.

So inside all other items I've put opacity: 1; , but that didn't help.

.mat-card {
  opacity: 0.5;
}

Answer 1

Give .mat-card a background color of rgba(0, 0, 0, 0.5) instead of using opacity (or whichever colour you want for the background color):

.mat-card{
    background-color: rgba(0, 0, 0, 0.5);
}

Answer 2

If you add opacity property to a parent element then all of the child elements within this will reflect with it's parent opacity property and you can't override this to child element. So if you need background color opacity to a parent element then remove opacity property from parent element, and add rgba color property within this.

.mat-card {background: rgba(0,0,0,0.5);}

Answer 3

When you're using multiple elements, its always good to keep separate properties for elements which you derived child elements from. In this case opacity ends up becoming a part of all the elements hence its better to use background-color property.