javascript - 屏蔽网页

Question

例子:

带有红色边框的区域是您可以完全透过 mask 看到的区域。其他所有内容都是灰度的，并且部分隐藏在不透明或透明的白色背景中。

我尝试的一件事是为每个可选区域制作一个带有灰度过滤器和较低不透明度的类。然后，我将此类应用于除所选区域之外的所有区域。但这在嵌套区域中效果不佳，因为某些区域变得比其他区域不透明。

关于我如何实现它有什么建议吗？

---

Codepen

仅在 #footer 上按预期工作，因为它没有可选的父区域或子区域

Answer 1

你可以像这样将一个highlighted类应用到所选元素

.highlighted {
  border: 1px red solid;
  outline: 999em solid rgba(255,255,255, .75);
}

宽大的轮廓将涵盖所有其他元素。

示例:http://codepen.io/anon/pen/emOXRJ