网站变灰 CSS

整站变灰

在哀悼日，某些网站会将整体色调改成灰色以示哀悼，这个效果实现很简单，只需要下面这段 css 即可实现：

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
 }

如果不希望整个网站都变灰，只希望图片变灰，可以将 html 改成 img 即可。

仅图片变灰

img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
 }

举一反三，可以自定义一个 css 类，然后将该类应用到页面上的任意元素上即可实现网站指定部分变灰。