J'ai quelques mat-card qui sont des éléments flexbox. Je veux qu'une carte elle-même soit un peu transparente opacity: 0.8; . Mais les autres éléments à l'intérieur restent tels quels.
Donc, dans tous les autres éléments, j'ai mis opacity: 1; , mais cela n'a pas aidé.
.mat-card {
opacity: 0.5;
}
3 Réponses :
Donnez à .mat-card une couleur d'arrière-plan de rgba (0, 0, 0, 0.5) au lieu d'utiliser l'opacité (ou la couleur de votre choix pour la couleur d'arrière-plan):
.mat-card{
background-color: rgba(0, 0, 0, 0.5);
}
Merci beaucoup! C'est un moyen simple mais efficace.
Si vous ajoutez la propriété opacity à un élément parent, tous les éléments enfants de celui-ci reflèteront avec sa propriété opacity parent et vous ne pouvez pas remplacer cela pour child élément. Donc, si vous avez besoin d'une couleur d'arrière-plan opacity pour un élément parent, supprimez la propriété opacity de l'élément parent et ajoutez la propriété color rgba à l'intérieur.
.mat-card {background: rgba(0,0,0,0.5);}
Lorsque vous utilisez plusieurs éléments, il est toujours bon de conserver des propriétés distinctes pour les éléments dont vous avez dérivé les éléments enfants. Dans ce cas, l ' opacité finit par faire partie de tous les éléments, il est donc préférable d'utiliser la propriété background-color .