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

apply a rose tint or change entire documents brightness in css/js/jquery/html?

本文关键字：文档 亮度 色调 玫瑰色 jquery js css HTML 玫瑰 应用      更新时间：2023-09-26

有没有更好的做法来实现这一点？目前，我正在使用宽度/高度为 100% 的不透明红色div，更高的 z 索引和指针事件：没有一个允许下面的一切都工作。

另外，我希望能够使整个文档变暗，是否可以应用任何亮度属性，或者我会再次在所有内容上放置不透明的黑色层更好吗？

只是想知道我是否以错误的方式做这件事。如果 js/jquery 解决方案更有效，我也会对它们感兴趣，我也不担心与旧浏览器的兼容性。

**如果有人能告诉我使所有东西变成黑白的最简单方法，我也将不胜感激。

仅限 WebKit 的功能：

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

您可以使用hue-rotate更改色调，具体取决于常规配色方案。如果一切都不同，您将需要一个自定义过滤器，这更困难，我现在正在这样做。

以下是更多信息。

您可以使用 

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 筛选器。使用 Chrome/Safari 的 -webkit-filter: grayscale;。在Mozilla和Opera中也有可能实现，但我不确定。

相关文章：