屏蔽网页答案

【问题标题】：Masking a web page屏蔽网页
【发布时间】：2014-11-11 21:49:04
【问题描述】：

例子：

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

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

关于我如何实现这一点的任何建议？

Codepen

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

【问题讨论】：

如果您需要帮助，您可以输入一些代码吗？ ^^

标签： javascript css mask

【解决方案1】：

您可以像这样将highlighted 类应用于所选元素

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

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

例如：http://codepen.io/anon/pen/emOXRJ

【讨论】：

这不会使周围区域变灰。
我将该类应用于标题元素。如果他将类应用于特定的 div，他可以获得效果。
大纲的好主意，我认为固定突出显示的窗口是@onetrickpony 所寻找的：codepen.io/anon/pen/YPKgra
好吧，在这种情况下，您可以只设置伪元素的样式，而不是使用空元素，例如body::before
这里不能使用灰度滤镜，但那很聪明！此外，您似乎需要使用 div 将元素放在前面进行这项工作 - codepen.io/anon/pen/RNbdYe

【解决方案2】：

添加一个高于叠加层的 z-index 到您想要过于关注的元素。

【讨论】：

【解决方案3】：

我认为没有直接的方法可以做到这一点。一种想法是在相关元素的边缘周围放置四个具有半透明填充颜色的块元素，但是您必须在 JavaScript 中测量和定位它们，并且还必须考虑滚动。在尝试这个之前，我会寻找一个已经提供这个的库。

【讨论】：

【解决方案4】：

您可以使用具有透明灰色背景且 z-index 高于网站其余部分的全尺寸 div：

#cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(200, 200, 200, 0.8);
    z-index: 1;
}

然后在您想要完全可见的区域上设置更高的 z-index：

#other_content{
    z-index: 2;
    position: absolute;
    top: 50px;
    left: 100px;
    border: red medium solid;
}

喜欢这个fiddle

【讨论】：