¿Opacidad CSS sólo para el color de fondo, no para el texto en él?

Parece que quieres usar un fondo transparente, en cuyo caso podrías intentar usar la función rgba():

rgba(R, G, B, A)

R (rojo), G (verde) y B (azul) pueden ser o, donde el número 255 corresponde al 100%. A (alfa) puede ser un entre 0 y 1, o un, donde el número 1 corresponde al 100% (opacidad total).

Ejemplo de RGBa

rgba(51, 170, 51, .1) / 10% de verde opaco / rgba(51, 170, 51, .4) / 40% verde opaco / rgba(51, 170, 51, .7) / 70% verde opaco / rgba(51, 170, 51, 1) / verde totalmente opaco /

Un pequeño [ejemplo][2] que muestra cómo se puede utilizar rgba.

A partir de 2018, prácticamente **todos los navegadores soportan la sintaxis rgba.

La forma más fácil de hacerlo es con 2 divs, 1 con el fondo y 1 con el texto:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

No se puede. Usted tiene que tener un div separado que es sólo que el fondo, de modo que sólo se puede aplicar la opacidad a eso.

Traté de hacer esto recientemente, y como ya estaba usando jQuery, encontré lo siguiente para ser la menor molestia:

1. Crear los dos divs diferentes. Serán hermanos, no estarán contenidos el uno en el otro ni nada.
2. Dale al div texto un color de fondo sólido, porque ese será el predeterminado sin JavaScript.
3. Utiliza jQuery para obtener la altura del div text y aplícala al div background.

Estoy seguro de que hay algún tipo de manera ninja de CSS para hacer todo esto con sólo flotadores o algo así, pero no tuve la paciencia para averiguarlo.