Apply transparent background to element, but not the inside text content.

Apply CSS opacity (transparent) to the background only

To overcome this issue, We have to use rgba value property for parent element.

Syntax
background: rgba(red, green, blue, alpha value(opacity));

CSS


  .demo{
   background: rgba(81, 91, 162, 0.8); 
 }

Demo

See the Pen Apply CSS opacity (transparent) to the background only by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Compatibility issue in IE:

Opacity property is not supported in IE older version browsers. We can use CSS3 PIE approach to overcome this cross browser issue.

Continue Reading