CSS opacity only to background color not the text on it?

A possible rephrased version of the CSS code to apply opacity only to the background color, not the text on it, could be:
Define a container div with the desired width and height, and set its position to relative.
css
#container {
  position: relative;
  width: 300px;
  height: 200px;
}
Add a child div for the background color, set its position to absolute, and cover the entire container using the top, left, height, and width properties. Set the opacity using the filter property for Internet Explorer and the -moz-opacity and opacity properties for other browsers.
css
#block {
  background: #CCC; position: absolute; top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  filter: alpha(opacity=60); /* IE */
  -moz-opacity: 0.6; /* Mozilla */
  opacity: 0.6; /* CSS3 */
}
Add another child div for the text and set its position to absolute. Use the same top, left, height, and width properties as the block div to cover the entire container.
css
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
By using this approach, the opacity only affects the background color of the container, not the text on it.