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
#divBg1
{
    background:red;
    opacity:0.3
}

And the solution
#divBg2
{
    background:rgba(256,0,0,0.3);
}

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.

Here is a simple fiddle to demonstrate the same.

http://jsfiddle.net/VcfKq/

 
Facebook Facebook LinkedIn LinkedIn

Leave a Comment

For Gravatar icon