Как применить непрозрачность только для mat-card, но не для остального содержимого внутри mat-card?

Question

У меня есть несколько мат-карт, которые являются флексбоксами.Я хочу, чтобы сама карта была немного прозрачной opacity: 0.8;.Но остальные элементы внутри остаются такими, как есть.

Так что внутри всех остальных предметов я положил opacity: 1;, но это не помогло.

.mat-card {
  opacity: 0.5;
}

Answer 1

Если вы добавите свойство opacity к родительскому элементу, то все дочерние элементы в нем будут отражены с его родительским свойством opacity, и вы не сможете переопределить это для дочернего элемента.Поэтому, если вам нужен цвет фона opacity для родительского элемента, удалите свойство opacity из родительского элемента и добавьте в него rgba свойство цвета.

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

Answer 2

Когда вы используете несколько элементов, всегда полезно сохранять отдельные свойства для элементов, из которых вы получили дочерние элементы.В этом случае opacity становится частью всех элементов, поэтому лучше использовать свойство background-color .

Answer 3

Присвойте .mat-card цвет фона rgba (0, 0, 0, 0.5) вместо использования непрозрачности (или какого цвета вы хотите для фона):

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