CSS opacity without affecting the text
Here is a simple way to set opacity only to the background without affecting the text inside. The general approach gives problem
And the solution
The opacity attribute forces all the child elements to also become transparent. On the other hand ‘rgba’ includes alpha transparency support leaving the descendents unaffected.