CSS: How to create a background cutout using elements (not images)?

I am trying to create a sort of "window" effect where the div positioned above all the other elements is like a window through the overlay (background color) element positioned exactly below it.

Here is an example of what I mean.

I would like the text to show through as if you were looking through a window. How can this be done without the use of images?

Solution:

One solution is to create a very wide semi-transparent border. However, that approach affects the overall dimensions (or appearance of dimensions).

An alternative solution (the one that I am using) is to set a semi-transparent box-shadow with a large spread, eliminating the need for a separate overlay div.

#cutout {
    box-shadow:         0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 0px 0px 5000px rgba(0, 0, 0, 0.6);
}

Solution

As per i understand may be that's you want

CSS: How to create a background cutout using elements (not images)?

Solution:

http://jsfiddle.net/VRLNJ/2/