是否可以使用 CSS 将整个网页变为灰度？答案

【问题标题】：Is it possible to turn an entire webpage to grayscale using CSS?是否可以使用 CSS 将整个网页变为灰度？
【发布时间】：2015-07-23 09:45:35
【问题描述】：

我想将整个网站变成灰度。当然，我可以手动编辑 CSS 并调整每个 color、background-color 和 co。属性，我可以在 Photoshop 中调整每一个图像。

但是有没有更简单的方法，例如使用纯 CSS？

例如，在您的网站顶部放置一个 100% x 100% 的覆盖 div 以将每种颜色变为灰度？

有什么提示吗？

【问题讨论】：

【解决方案1】：

无需对每个元素都设置过滤器，您可以在 HTML 上应用过滤器。

html {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

如果您希望在 html 上保留彩色背景，则为 body。

【讨论】：

我认为这是一个更好的解决方案：不会像公认的解决方案那样破坏滚动和 DOM 元素定位，并且可能更有效。
为什么是“html”而不仅仅是“body”？
@RoboRobok 如答案中所说，一个或另一个，如果设置正文，则可以在 html 上设置彩色背景，以防您仍想使用一些颜色（例如红色条纹或其他任何东西......）

【解决方案2】：

是的，只是使用滤镜灰度

CSS

*{
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

注意：您可以在任何元素（html、正文、标题等）中应用它

【讨论】：