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);
}

回答1:

As per i understand may be that's you want

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

回答2:

somthing like this

http://jsfiddle.net/amkrtchyan/VRLNJ/3/

来源：https://stackoverflow.com/questions/8890179/css-how-to-create-a-background-cutout-using-elements-not-images