Css 用剪切矩形遮罩覆盖

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

以下是一个示例屏幕截图：

（正如你所注意到的，有一个从深色遮罩上切下的矩形。在Photoshop中，这很简单——只需在顶部放置一层并将矩形切下）

我如何使它在CSS中工作

---

旁注：这种技巧似乎经常用于“教育用户了解新功能”。

目前只能在webkit中实现。使用属性

-webkit mask box image

。除此之外，我们无法仅使用css来实现这一点。

您可以使用边框或框阴影来实现这一点。并在伪元素上使用它们来最小化标记

框阴影的示例：

div{
身高：100%；
位置：相对位置；
}
.覆盖{
显示：内联块；
位置：相对位置；
z指数：1；
}
.覆盖：之后{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；高度：100%；
盒影：0px 0px 0px 999px rgba（0,0,0,8）；
}

一些内容

其他内容

更多内容

您可以使用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;
}

---

那么，如果他同意使用JavaScript，我们如何才能做到这一点呢？这并不能回答问题。我们不能对黑色遮罩下的元素/图形进行任何假设。这是我对您所解释内容的理解。如果没用的话，很抱歉。谢谢。你的回答有帮助！我投了更高的票，但忘了标记。好主意！我要试试这个！