CSS Tricks: How to use a semi-transparent background in a div without affecting the text

Here is the simple way to add a semi-transparent background to a div without affecting the text elements inside the div.

Instead of this code:

background:#555;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */

Use this:

background-color:rgba(255,0,0,0.5);

If you dont know the rbga value of the hexidecimal color you want to use, you can find it at http://www.color-hex.com/. Just type the hexidecimal value into the box at the top right corner of the page and click “Get color info.”

Take the rgb value  it provides you and put the three numbers into the paranthese in the block of code above. Then simply add the percent of opacity that you want to add to the background (i.e. 0.5 for 50%, 0.8 for 80%, etc.).