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

Question

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

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

例如，在您的网站顶部放置 100% x 100% 的叠加层 div 将每种颜色变为灰度？

有什么提示吗？

Answer 1

是的，只是使用滤镜灰度

CSS

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

注意：您可以将此应用于任何元素（html、body、header 等...）

Answer 2

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

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

或正文，如果您希望在 html 上保留彩色背景。

Is it possible to turn an entire webpage to grayscale using CSS?