使用CSS屏蔽div

Question

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

.background

将包含图像。

.overlay

将有一个半透明的白色背景覆盖

.inner

会有效地屏蔽掉div大小的矩形吗？使背景透明并穿过覆盖层 div。

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

仅使用 css 可以吗？

Answer 1

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

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>

Answer 2

是的，如果您使用 PNG 图像进行遮罩。可以使用它的子元素来剪辑背景 div。您需要使用中间或任何您想要的透明区域的 PNG 来实现。

Answer 3

虽然您无法遮盖复杂的形状，但可以遮盖简单的形状，例如立方体或其圆边。

只需使用：

overflow-x

或者

overflow-y

或者

overflow

根据 Google Chrome 的检查，可以设置为：

auto

、

hidden

、

inherit

、

initial

、

overlay

、

revert

、

scroll

、

unset

或

visible

尽管如此，我发现：

inherit

、

initial

、

revert

、

unset

和

visible

大多数情况下不提供口罩。

最后，如果您想在曲线上进行遮罩，只需设置

border-radius

属性即可。 请记住，在

border-radius

中，您可以使用：

1值：A；所有角落

2个值：A、B； A=左上 & 右下 B=右上 & 左下

3个值：A、B、C； A=左上 B=右上和左下 C=右下

4个值：A、B、C、D； A=左上 B=右上 C=右下 D=左下

-在本文发布之日，已在 Google Chrome 版本 96.0.4664.45（官方版本）（64 位）中使用 HTML 和 CSS 进行了测试。

Answer 4

简短的回答是 - 不，你不能通过它的子元素来剪辑 div。

但是你可以在不裁剪的情况下解决你的问题。据我了解，你只需要内部 div 周围有白色边框。您可以使用边框或框阴影。你也可以创建这样的边框，每边 4 个 div