使背景变暗 - 不影响元素本身。（覆盖？）答案

【问题标题】：Darken Background - Without affecting elements itself. (Overlay?)使背景变暗 - 不影响元素本身。（覆盖？）
【发布时间】：2014-01-23 20:44:17
【问题描述】：

我想让背景变暗。通常，它就像放置一个 z-index 比最前面的元素低的叠加层一样简单，如下所示：

我现在想要实现的是让叠加层后面的元素仍然可以点击、可选择等等。

在这个例子中，链接应该是可点击的，上面的文字应该是可选择的，但还是这么黑。

我想我不能用纯 CSS 存档，你的解决方案是什么？

谢谢

【问题讨论】：

【解决方案1】：

只需禁用叠加层上的指针事件：

pointer-events: none;

例子：

【讨论】：

禁用指针事件是否会导致覆盖层后面的元素可点击？因为这就是 OP 所要求的......
是的，它基本上会导致叠加层通过事件，正如您在codepen示例中看到的那样
好吧，我（当然还有其他人）在工作中被 CodePen 屏蔽了。这就是 Stack Overflow 提出 Stack Snippets 的原因之一，它在 Stack Overflow 拥有的域内工作......但我只是注意到这是一个非常古老的问题和答案，所以没关系:)。

【解决方案2】：

见这个小提琴。我的技术是添加相同的元素到覆盖 div 并将 href 文本的文本颜色设置为覆盖的背景色，使其看起来不可见。见这个小提琴。

覆盖div中href的CSS使其不可见

#overlay a{
    color:black;
}

其实overlay中也有链接。我只是添加了上面的CSS使它们不可见。看这个：

【讨论】：