使用 CSS 屏蔽 div

Question

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

.background 将包含图像。 .overlay 叠加层将有一个半透明的白色背景 .inner 会有效地掩盖 div 大小的矩形吗？使背景透明并切穿叠加层div。

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

只用 css 就可以吗？

Answer 1

简短的回答是 - 不，你不能用 children 剪辑 div。

但是你可以不用裁剪来解决你的问题。据我了解，您只需要在内部 div 周围加上白色边框。您可以使用边框或 box-shadow。您也可以创建这样的边框，每边有 4 divs

Answer 2

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

Answer 3

看起来您可以实现添加带有一定不透明度的粗边框 (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 4

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

只需使用： 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 在本文发布之日。

使用 CSS 屏蔽 div

Mask div using CSS

html

css

mask

masking