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.

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


   background: rgba(81, 91, 162, 0.8); 


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.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *