使用CSS全局将网页变成灰度是可行的吗？

Question

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

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

例如，在您的站点上放置一个100% x 100%的覆盖div，使每个颜色变为灰度？

有什么提示吗？

- Golo Roden

Answer 1

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

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

如果您想在html上保留有颜色的背景，请使用body元素。

http://codepen.io/anon/pen/VLawaK

- G-Cyrillus

---

我认为这是一个更好的解决方案：不像已接受的解决方案那样会破坏滚动和DOM元素定位，而且可能更有效率。 - ignacy130

为什么要使用“html”，而不是只用“body”？ - Robo Robok

@RoboRobok 如答案所述，要么这样，要么那样。如果设置了body，则可以在HTML上设置有色背景，以便在仍然想使用一些颜色的情况下（比如红色条纹或其他任何颜色）。 - G-Cyrillus

Answer 2

有的，只需使用 "filter: grayscale" 滤镜即可

CSS

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

注意：您可以在任何元素（html、body、header等）中应用此方法。

点击此处查看演示

- Luís P. A.

---

嗯，也许我漏掉了什么，但是即使在你的演示中，标志仍然是彩色的，而不是灰度的？ - Golo Roden

据我看来，html { filter: grayscale(100%) } 可以提高性能。 - ausi

@GoloRoden，也许你需要一个前缀。 - Luís P. A.

@ShrinivasShukla 请提供IE浏览器的版本。 - Luís P. A.