Applying Opacity to a Container But Not Its Contents

Another quick and easy technique which eludes some of us! While the use of rgba for background colors is not supported by all browsers, it can still be used with a fallback:

div {
/* Fallback to solid white */
background: rgb(255, 255, 255);
/* White with 50% opacity */
background: rgba(255, 255, 255, 0.50);
}
div p {
/* Text inside the div will render at 100% opacity */
color: #000;
}

Just remember that the fallback should be declared first since the last instance of a property (that the browser understands) takes precedence.