使用 CSS 屏蔽 div

Question

好吧，假设我正在为我的 div 使用以下设置：

.background将包含一个图像。 .overlay会有一个半透明的白色背景作为覆盖层， .inner会有效地屏蔽掉 div 大小的矩形吗？使背景透明并穿过覆盖层 div。

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

只用CSS可以实现吗？

Answer 1

看起来你可以实现添加具有一定不透明度的粗边框（Fiddle）。边框宽度将决定所需矩形的大小：

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>