使用 CSS 屏蔽 div

Question

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

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

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

这可能只用 css 吗？

原文由 PahPow 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 deebs 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

只需使用： overflow-x 或 overflow-y 或 overflow

Which according to an inspect of Google Chrome, can be set to: auto , hidden , inherit , initial , overlay , revert , scroll , unset , 或 visible

Although, I find that: inherit , initial , revert , unset and visible do not provide a mask大多数情况下。

最后，如果您想在曲线上进行遮罩，只需设置 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=左下

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

原文由 user12246115 发布，翻译遵循 CC BY-SA 4.0 许可协议