应用玫瑰色调或更改css / js / jquery / html中的整个文档亮度？ [英] apply a rose tint or change entire documents brightness in css/js/jquery/html?

问题描述

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

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

<只是想知道我是否会以错误的方式解决这个问题。我也对js / jquery解决方案感兴趣，如果它们更有效率，我也不会对与旧浏览器的兼容性感到困扰。

**如果有人能说出来的话我是最简单的方法，使所有的东西变成黑色和白色我也非常感激。

解决方案

仅限WebKit功能：

  -webkit-filter：grayscale; / *把所有东西都变成黑白* / 
 -webkit-filter：brightness（20％）; / *使东西更明亮* / 
  

你可以使用 hue-rotate 更改色调，具体取决于您的一般配色方案。如果它们完全不同，那么你需要一个自定义过滤器，这个过滤器更加困难，我现在正在做这个过程。

以下是更多信息。

Is there a better practice for achieving this? Currently I'm using an opaque red div of width/height 100%, higher z-index and pointer-events: none which allows everything underneath to work.

Also I'd like to be able to dim the entire document, is there any sort of brightness property I could apply or would I again be better off putting an opaque black layer over everything?

Just wondering if I'm going about this the wrong way. I'd also be interested in js/jquery solutions if they were more efficient, I'm not bothered about compatibility with older browsers either.

** If anyone could tell me the easiest way to make everything black and white also I'd really appreciate it.

解决方案

A WebKit-only feature:

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

You can use hue-rotate to change the hue, depending on what your general color scheme is. If it's all different, you'll need a custom filter, which is more difficult and which I'm in the process of doing now.

Here's more information.

这篇关于应用玫瑰色调或更改css / js / jquery / html中的整个文档亮度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！