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

Question

我想将整个网站变成灰度。当然，我可以手动编辑CSS并调整每一个color，background-color＆amp;合。属性，我可以在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，正文，标题等）

中应用它

<强> DEMO HERE

Answer 2

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

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

或身体，如果你想在html上保留彩色背景。

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