有没有更好的做法来实现这一目标？目前我正在使用宽度/高度为 100%、更高的 z-index 和 pointer-events: none 的不透明红色 div，它允许下面的一切工作。
另外，我希望能够使整个文档变暗，是否可以应用任何类型的亮度属性，或者在所有内容上放置一个不透明的黑色层会更好吗？
只是想知道我是否以错误的方式解决这个问题。如果 js/jquery 解决方案更高效，我也会对它们感兴趣，我也不担心与旧浏览器的兼容性。
** 如果有人能告诉我制作黑白照片的最简单方法，我也会非常感激。
仅 WebKit 的功能：
-webkit-filter: grayscale; /* Turn everything black and white */
-webkit-filter: brightness(20%); /* Make stuff brighter */
您可以使用hue-rotate来更改色调，具体取决于您的一般配色方案。如果一切都不同，您将需要一个自定义过滤器，这更困难，我现在正在这样做。
It looks like you want the entire page (including "underlying" DOM elements) to be a particular hue, which is not possible by just changing the body color or opacity. What you want is something like the BlockUI plugin for jQuery. If I'm not mistaken there is an option to still allow the user to interact with page elements when the UI is "blocked".
...是否有任何类型的亮度属性我可以应用，或者我再次在所有东西上放置一个不透明的黑色层会更好吗？
最简单的方法是：$('body').css('opacity', '0.3');. 如果要更改背景颜色，可以将其应用于 html 节点：$('html').css('background', '#000');
** 如果有人能告诉我制作黑白照片的最简单方法，我也会非常感激。
在 Internet Explorer 中，您可以使用windows 过滤器。用于-webkit-filter: grayscale;Chrome/Safari。在 Mozilla 和 Opera 中也可以实现，但我不确定。
您可以使用
body {
opacity: 0.8; // Any value between 0 & 1 where is 0 in invisible & 1 is 100% opaque
}
但由于那将是白色背景，我不确定它会给你想要的输出。如果您想为整个屏幕添加滤色器，则必须添加叠加层，就像您说的那样，下面的所有东西都不起作用。
-webkit- CSS 属性仅适用于 Chrome 和 safari。