Mask div using CSS

Question

Ok so say i'm using the follow setup for my divs:

.background will contain an image. .overlay will have a semitransparent white background for the overlay .inner would effectively mask out a rectangle the size of the div? So that the background is transparent and cuts through the overlay div.

<div class="background">
    <div class="overlay">
        <div class="inner">
        </div>
    </div>
</div>

Is this possible with just css?

Answer 1

Looks like you can achieve that adding a thick border with some opacity (Fiddle). The border widths will determine size of rectangle desired:

<div class="background">
  <div class="inner">
  </div>
</div>

and CSS:

html, body {
  height: 100%;
  width: 100%;
}
.background {
  width: 100%;
  height: 100%;
  background: url('http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg');
}
.inner {
  width: 100%;
  height: 100%;
  border-top: 130px solid rgba(255, 255, 255, 0.5);
  border-bottom: 130px solid rgba(255, 255, 255, 0.5);
  border-left:  100px solid rgba(255, 255, 255, 0.5);
  border-right:  100px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

Answer 2

YES, if you use a PNG image for the masking. It is possible to clip the background div using it's children. What you would need to do it use a PNG with transparent area in the middle or where ever you want.