Mask div using CSS

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?

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

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

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