覆盖切出的矩形蒙版

Question

场景：我想用矩形蒙版覆盖元素（例如，不透明度为 0.8 的背景 #000）。接下来，我要突出显示覆盖区域中的一个区域。

这是一个示例屏幕截图：

（如您所见，从变暗的蒙版中剪下了一个矩形。在 Photoshop 中，这很简单 - 只需在顶部放置一个图层并剪下矩形）。

我怎样才能让它在 CSS 中工作？

旁注：这种技巧似乎在 "educating users about new features" 中用得很多。

Answer 1

目前只能在webkit中完成。使用属性 -webkit-mask-box-image。除此之外，我们无法仅使用 css.

来实现这一点

Answer 2

您可以为此使用边框或框阴影。并在伪元素上使用它们以最小化标记。

带有框阴影的示例：

div{
  height:100%;
  position:relative;
}
.overlay{
  display:inline-block;
  position:relative;
  z-index: 1;
}
.overlay:after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  box-shadow: 0px 0px 0px 9999px rgba(0,0,0,.85);
}

<div>
  <p>Some content</p>
  <p class="overlay">Other content</p>
  <p>More content</p>
</div>

Answer 3

您可以使用 CSS z-index 在叠加层上方显示突出显示的元素，如下所示：

.overlay{
  display:none;
  position:absolute;
  background:rgba(0,0,0,0.8);
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:999;
}

.highlight{
  position:relative;
  z-index:9999;
}

Live Demo

覆盖切出的矩形蒙版

Overlay with cut out rectangle mask

css

overlay