¿cómo hacer efecto trasparencia al fondo no al texto de un div?

[berkeleyPunk]

Recuerdo haber visto en algún lado un menú desplegable, que al abrirse dejaba ver el fondo, con un opacity de .3, quizá. El efecto hover consistía en que el ítem semi-transparente se volvía un poco más opaco, con un opacity de .7, talvez. Pero el texto de los ítems del menú nunca era transparente, sino sólido. ¿Cómo hacer eso?

La cosa no es tan fácil como poner un opacity al elemento, pues la opacidad aplica a todo el elemento, lo cual incluye el texto adentro. ¿Cómo hay que proceder para que el texto quede sólido, sin opacidad?

Veamos el siguiente ejemplo:

Código HTML:

<div class="capaTransparente">
  Texto dentro de un DIV trasparente
</div>
  
<div class="capaFondo">
    Qu. Whether a people can be called poor, where the common sort are well fed, clothed, and lodged?
    Qu. Whether the drift and aim of every wise State should not be, to encourage industry in its members?
    Qu. Whether the four elements, and man's labor therein, be not the true source of wealth?
    Qu. Whether money be not only so far useful, as it stirred up industry, enabling men mutually to participate the fruits of each other's labor?
    Qu. Whether any other means, equally conducing to excite and circulate the industry of mankind, may not be as useful as money.
</div>
 

Le aplicamos el siguiente estilo:

Código CSS:

.capaFondo {
      position:relative;
      top:0px;
      left:0px;
      width:500px;
      height:300px;
      background-color:blue;}
.capaTransparente {
      position:absolute;
      top:50px;
      left:50px;
      width:300px;
      height:200px;
      background-color:gray;
      color:black;
      font-size:40px;
      z-index:1;
      opacity:.3;}
 
.capaTransparente:hover {opacity:.7;}