Как применить прозрачность, не затрагивая дочерний элемент с html / css?

Я хочу добиться этого с помощью HTML и CSS:

schema

Я попытался установить непрозрачность контейнера равной 0,3, а поле равным 1, но это не работает: оба элемента имеют непрозрачность 0,3.

jsFiddle моей попытки здесь

Эффект, которого я пытаюсь достичь, это всплывающее окно, которое появляется в верхней части страницы. Это выделяется уменьшением содержимого ниже (уменьшением непрозрачности).

Ответы на вопрос(8)

Ваш ответ на вопрос