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.).

Related Posts:

• CSS Tricks: Use two background images for one div
• Javascript Trick: Add a class or ID to an HTML element on hover
• CSS Tricks: Removing the horizontal scrollbar from your divs
• CSS Tricks: Custom styling for your scrollbars
• Concrete5: How to add a unique body class to individual pages