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

我想把背景调暗。通常情况下，只需放置一个z指数低于最前面元素的覆盖层，如图所示：

（来源：）

我现在想要实现的是使覆盖后面的元素仍然可以单击、选择等等

在这个例子中，链接应该是可点击的，上面的文本应该是可选择的，但仍然是这么暗

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

---

谢谢

只需在覆盖上禁用指针事件：

pointer-events: none;

例如：

---

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

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

#overlay a{
    color:black;
}

实际上，覆盖中也有链接。我刚刚添加了上面的CSS以使它们不可见。请参见：

---

背景：rgba（0,0,0,0.3）；你不能仅仅使用css来更改背景颜色吗？为什么要使用覆盖？这可以通过更改背景颜色轻松完成。使用浅样式表和深样式表，然后使用jQuery指定一个单击函数来在两者之间切换。禁用指针事件是否会导致覆盖后面的元素可单击？因为这就是OP所要求的……是的，它基本上会导致覆盖通过事件，正如您在codepen示例中所看到的，我（我确信其他人）在工作时被阻止使用codepen。这就是堆栈溢出产生的原因之一，它在堆栈溢出所拥有的域内工作。。。但我只是注意到这是一个非常古老的问题和答案，所以没关系：）。