html - 使用 CSS 屏蔽 div

Question

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

.background 将包含一个图像。.overlay 将有一个半透明的白色背景作为叠加层.inner 会有效地屏蔽掉一个与 div 大小相同的矩形吗？这样背景就透明了，并且切穿了overlay div。

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

仅使用 css 是否可行？

Answer 1

看起来你可以实现添加带有一些不透明度的粗边框 (Fiddle) .边框宽度将决定所需矩形的大小:

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

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