Question

好吧所以说我正在使用我的div的以下设置：

.background将包含图片。 .overlay将为叠加层提供半透明的白色背景 .inner会有效地屏蔽出一个div大小的矩形吗？这样背景就是透明的并且可以穿过叠加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;
}

Answer 2

简短的回答是 - 不，你不能用它的孩子来修剪div。

但你可以解决你的问题，而不会削减。据我所知，你只需要内部div周围的白色边框。您可以使用边框或框阴影。你也可以创建这样的边框，每边有4个div。

Answer 3

是，如果您使用PNG图像进行遮罩。可以使用它的子项剪辑背景div。您需要做的是在中间或任何您想要的地方使用带透明区域的PNG。

使用CSS屏蔽div

3 个答案: