La transparence avec "opacity"
Si on applique la propriété css "opacity" pour jouer sur la transparence d'un élément, les éléments enfants de ce dernier seront également touchés par la transparence:
background-color: #F77600;
opacity: 1
l'opacité est nulle, le texte est bien visible
background-color: #F77600;
opacity: 0.6
le texte paraît gris, en réalité il est toujours noir mais avec de la transparence
background-color: #F77600;
opacity: 0.3
et ainsi de suite
background-color: #F77600;
opacity: 0.1
jusqu'à ne plus rien y voir
La transparence avec "rgba"
Si on applique utilise les couleurs rgba pour codifier les couleurs de notre fond, les éléments enfants gardent leur "non" transparence
background:rgba(247, 118, 0, 1)
l'opacité est nulle, le texte est bien visible
background:rgba(247, 118, 0, 0.6)
le texte est noir sans transparence
background:rgba(247, 118, 0, 0.3)
ici aussi
background:rgba(247, 118, 0, 0.1)
et encore ici