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

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

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

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

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