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

问题

I would like to turn an entire website to grayscale. Of course, I can manually edit the CSS and adjust every single color, background-color & co. property, and I can adjust every single image in Photoshop.

But is there an easier way, e.g. by using pure CSS?

E.g., something such as putting a 100% x 100% overlay div on top of your site that turns every color to grayscale?

Any hints?

回答1:

No need to set the filter on every single element, You can apply the filter on HTML.

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

or body if you wish to keep a colored background on html.

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

回答2:

Yes there is, just use filter grayscale

CSS

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

Note: You can apply this in any element (html, body, header, etc...)

DEMO HERE

来源：https://stackoverflow.com/questions/30192221/is-it-possible-to-turn-an-entire-webpage-to-grayscale-using-css