CSS-opacity-without-affecting-the-text-inside

03-Jul-2013 0 Comments superuser

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/

 
Comments