灰掉，灰掉... Cross-Browser Grayscale with CSS

nginx.conf

# 1. Make sure you have nginx sub module compiled in
# nginx -V  2>&1 | grep --color=always '\-\-with\-http_sub_module'

# 2. add two directives below at HTTP level

# nginx.conf
http {
        # ......

        sub_filter  '</head>' '<style type="text/css">html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } img { _filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0); -webkit-filter: grayscale(100%); } </style>';
        sub_filter_once on;

        # ......
}

# 3. nginx -t && /etc/init.d/nginx reload

Notes:

1. Does not work on Firefox

Fix & Enhance:
# /* Firefox 10+, Firefox on Android */

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}