在css / js / jquery / html中应用玫瑰色调或更改整个文档的亮度?

实现这一目标有更好的做法吗? 目前我正在使用宽度/高度为100%的不透明红色div,更高的z-index和指针事件:none,它允许下面的所有内容工作。

此外,我希望能够调整整个文档,是否有任何类型的亮度属性我可以应用或者我会再次更好地在所有内容上放置不透明的黑色层?

只是想知道我是否会采取错误的方式。 我也对js / jquery解决方案感兴趣,如果它们更高效,我也不会担心与旧浏览器的兼容性。

**如果有人能告诉我制作一切黑白的最简单方法,我也非常感激。

仅限WebKitfunction:

-webkit-filter: grayscale; /* Turn everything black and white */ -webkit-filter: brightness(20%); /* Make stuff brighter */ 

您可以使用hue-rotate来更改色调,具体取决于您的常规配色方案。 如果它们完全不同,你将需要一个自定义filter,这更加困难,我现在正在做的事情。

这是更多信息。

您可以使用

 body { opacity: 0.8; // Any value between 0 & 1 where is 0 in invisible & 1 is 100% opaque } 

但由于那将是在白色背景上,我不确定它会给你想要的输出。 如果你想在整个屏幕上添加彩色滤镜,你必须添加叠加层,就像你说的那样,下面的东西都不会起作用。

-webkit- CSS属性仅适用于Chrome和Safari。

看起来您希望整个页面(包括“底层”DOM元素)是一种特定的色调,仅通过更改正文颜色或不透明度是不可能的。 你想要的是像jQuery的BlockUI插件。 如果我没有弄错的话,当UI被“阻止”时,仍有一个选项允许用户与页面元素进行交互。

……我可以应用任何类型的亮度属性,或者我会再次在所有东西上涂上不透明的黑色层?

最简单的方法是: $('body').css('opacity', '0.3'); 。 如果你想改变背景颜色,可以将它应用到html节点: $('html').css('background', '#000');

**如果有人能告诉我制作一切黑白的最简单方法,我也非常感激。

在Internet Explorer中,您可以使用Windows筛选器 。 使用-webkit-filter: grayscale; 适用于Chrome / Safari。 也许有可能在Mozilla和Opera中实现,但我不确定。