¿Cómo aplicar una opacidad sin afectar un elemento secundario con html / css?

Quiero lograr esto usando html y css:

He intentado establecer la opacidad del contenedor en 0,3 y la caja en 1, pero no funciona: ambos divs tienen una opacidad de 0,3.

jsFiddle de mi intento aquí

El efecto que estoy tratando de lograr es un cuadro emergente que aparece en la parte superior de la página. Se resalta atenuando el contenido a continuación (reduciendo la opacidad).

Respuestas a la pregunta(8)

Su respuesta a la pregunta